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('头像')),
              ],
            ),
          ],
        ),
      ),
    );
  }
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前言 传统分页的话,一般只考虑传页数和每页数据条数这两个参数给后端,为了方便后面描述,我们给这个传参方式起个名字叫...
    寿司炸鸡女朋友阅读 7,982评论 0 9
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,138评论 1 32
  • width: 65%;border: 1px solid #ddd;outline: 1300px solid #...
    邵胜奥阅读 4,885评论 0 1
  • Django提供了一些类来帮助您管理分页数据 - 即分布在多个页面上的数据,带有“上一页/下一页”链接。 REST...
    YYL07阅读 4,312评论 0 2
  • 我想 你已入睡 伴你入睡的脸庞的幸福 不属于我 那天分别 我想 于我是痛的开始 于你 只是分别 我只记得那些时光 ...
    刘小智阅读 192评论 0 0