表格

DataTable

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

DataTable 的定义如下:

DataTable({
  Key key,
   this.columns, // 各列标题
   this.rows, // 行
  this.sortColumnIndex,
  this.sortAscending = true,
  this.onSelectAll,
  this.dataRowHeight = 48.0, // 每行高度
  this.headingRowHeight = 56.0, // 标题行高度
  this.horizontalMargin = 24.0, // 表格起始处水平间隔
  this.columnSpacing = 56.0, // 每列间距
})

简单示例:

var data = [
  {
    'title': 'github',
    'author': '小昱',
    'image': 'github.png'
  },
  {
    'title': 'flutter',
    'author': '小昱',
    'image': 'flutter.png'
  },
  {
    'title': 'sequelize',
    'author': '小昱',
    'image': 'sequelize.png'
  },
];
// ...
ListView(
  children: <Widget>[
    DataTable(
        columns: [
          DataColumn(label: Text("Title")),
          DataColumn(label: Text('Anthor')),
          DataColumn(label: Text('Image')),
        ],
        rows: data.map((post) {
          return DataRow(cells: [
            DataCell(Text(post['title'])),
            DataCell(Text(post['author'])),
            DataCell(Image.network('https://img.xiaoyulive.top/img/logo/' + post['image'])),
          ]);
        }).toList()),
  ],
);

DataColumn

表格列, 头部标题

const DataColumn({
   this.label, // 标题
  this.tooltip, // 长按时的提示文本
  this.numeric = false,
  this.onSort,
})

DataRow

表格行

const DataRow({
   this.cells, // 单元格数据, 是 DataCell 的数组
  this.key,
  this.selected = false,
  this.onSelectChanged,
})

DataCell

单元格

DataCell({
  this.child, // 单元格内容
  this.placeholder = false,
  this.showEditIcon = false,
  this.onTap,
})

带分页的表格

...

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress