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('头像')),
              ],
            ),
          ],
        ),
      ),
    );
  }
}
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,793评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,567评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,342评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,825评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,814评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,680评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,033评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,687评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,175评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,668评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,775评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,419评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,020评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,206评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,092评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,510评论 2 343

推荐阅读更多精彩内容

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