flutter数据表格DataTable

class DataTabelDemo extends StatefulWidget {
  @override
  _DataTabelDemoState createState() => _DataTabelDemoState();
}

class _DataTabelDemoState extends State<DataTabelDemo> {
  int _sortColumnIndex = 0;
  bool _sortAscending = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('DataTabelDemo'), elevation: 0.0,),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: ListView(
          children: <Widget>[
            DataTable(
              sortColumnIndex: _sortColumnIndex, // 设置表格按哪一列排序
              sortAscending: _sortAscending, // 设置表格是升序还是降序 false为升序
              onSelectAll: (bool value) {}, // 定制全选的动作
              columns: [ // 数据表格的栏目
                DataColumn(
                  label: Text('人物'),
                  onSort: (int index, bool ascending) { // 点击标题触发排序方法
                    setState(() {
                      _sortColumnIndex = index;
                      _sortAscending = ascending;

                      items.sort((a,b) {
                        if (! ascending) {
                          final c = a;
                          a = b;
                          b = c;
                        }
                        return a.title.length.compareTo(b.title.length);
                      });
                    });
                  }
                ),
                DataColumn(label: Text('介绍')),
                DataColumn(label: Text('头像')),
              ],
              rows: items.map((item) {
                return DataRow(
                  selected: item.selected, // 设置cell的选中状态
                  onSelectChanged: (bool value) { // 点击cell更改选中状态
                    setState(() {
                      if (item.selected != value) {
                        item.selected = value;
                      }
                    });
                  },
                  cells: [
                    DataCell(Text(item.title)),
                    DataCell(Text(item.subTitle)),
                    DataCell(Image.network(item.imageUrl)),
                  ]
                );
              }).toList(),
            ),
          ],
        ),
      ),
    );
  }
}

可以分页显示的数据列表

class ItemDataSource extends DataTableSource {
  final List<listItemModel> _items = items;
  int _selectedCount = 0;
  @override
  int get rowCount => _items.length;

  @override
  bool get isRowCountApproximate => false; // 如果不确定行的数量返回true

  @override
  int get selectedRowCount => _selectedCount;

  @override
  DataRow getRow(int index) {
    final listItemModel item = _items[index];
    return DataRow.byIndex(index: index, cells: <DataCell>[
      DataCell(Text(item.title)),
      DataCell(Text(item.subTitle)),
      DataCell(Image.network(item.imageUrl)),
    ]);
  }

  void _sort(getField(item), bool ascending) {
    _items.sort((a, b) {
      if (! ascending) {
        final c = a;
        a = b;
        b = c;
      }

      final aValue = getField(a);
      final bValue = getField(b);

      return Comparable.compare(aValue, bValue);
    });

    notifyListeners();
  }
}

class PaginatedDataTableDemo extends StatefulWidget {
  @override
  _PaginatedDataTableDemoState createState() => _PaginatedDataTableDemoState();
}

class _PaginatedDataTableDemoState extends State<PaginatedDataTableDemo> {
  int _sortColumnIndex = 0;
  bool _sortAscending = false;

  final ItemDataSource _itemDataSource = ItemDataSource();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('PaginatedDataTableDemo'), elevation: 0.0,),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: ListView(
          children: <Widget>[
            PaginatedDataTable( // 创建能分页显示的表格
              header: Text('卡通'), // 添加header
              rowsPerPage: 5, // 设置每页显示的数量
              source: _itemDataSource, // 数据源
              sortColumnIndex: _sortColumnIndex, // 设置表格按哪一列排序
              sortAscending: _sortAscending, // 设置表格是升序还是降序 false为升序
              onSelectAll: (bool value) {}, // 定制全选的动作
              columns: [ // 数据表格的栏目
                DataColumn(
                    label: Text('标题'),
                    onSort: (int columIndex, bool ascending) { // 点击标题触发排序方法
                      _itemDataSource._sort((item) => item.title.length, ascending);
                      setState(() {
                        _sortColumnIndex = columIndex;
                        _sortAscending = ascending;
                      });
                    }
                ),
                DataColumn(label: Text('作者')),
                DataColumn(label: Text('头像')),
              ],
            ),
          ],
        ),
      ),
    );
  }
}