一、DataTable

DataTable 是一个表格, 用于渲染数据

DataTable 的定义如下：

  1. DataTable({
  2.   Key key,
  3.   @required this.columns, // 各列标题
  4.   @required this.rows, // 行
  5.   this.sortColumnIndex,
  6.   this.sortAscending = true,
  7.   this.onSelectAll,
  8.   this.dataRowHeight = 48.0, // 每行高度
  9.   this.headingRowHeight = 56.0, // 标题行高度
  10.   this.horizontalMargin = 24.0, // 表格起始处水平间隔
  11.   this.columnSpacing = 56.0, // 每列间距
  12. })

简单示例：
018.png

  1. var data = [
  2.   {
  3.     'title': 'github',
  4.     'author': '小昱',
  5.     'image': 'github.png'
  6.   },
  7.   {
  8.     'title': 'flutter',
  9.     'author': '小昱',
  10.     'image': 'flutter.png'
  11.   },
  12.   {
  13.     'title': 'sequelize',
  14.     'author': '小昱',
  15.     'image': 'sequelize.png'
  16.   },
  17. ];
  19. // ...
  21. ListView(
  22.   children: <Widget>[
  23.     DataTable(
  24.         columns: [
  25.           DataColumn(label: Text("Title")),
  26.           DataColumn(label: Text('Anthor')),
  27.           DataColumn(label: Text('Image')),
  28.         ],
  29.         rows: data.map((post) {
  30.           return DataRow(cells: [
  31.             DataCell(Text(post['title'])),
  32.             DataCell(Text(post['author'])),
  33.             DataCell(Image.network('https://img.xiaoyulive.top/img/logo/' + post['image'])),
  34.           ]);
  35.         }).toList()),
  36.   ],
  37. );

二、DataColumn

DataColumn： 表格列, 头部标题

  1. const DataColumn({
  2.   @required this.label, // 标题
  3.   this.tooltip, // 长按时的提示文本
  4.   this.numeric = false,
  5.   this.onSort,
  6. })

三、DataRow

DataRow：表格行

  1. const DataRow({
  2.   @required this.cells, // 单元格数据, 是 DataCell 的数组
  3.   this.key,
  4.   this.selected = false,
  5.   this.onSelectChanged,
  6. })

四、DataCell

DataCell：单元格

  1. DataCell({
  2.   this.child, // 单元格内容
  3.   this.placeholder = false,
  4.   this.showEditIcon = false,
  5.   this.onTap,
  6. })

五、带分页的表格

…