Flutter DataTable 看这一篇就够了

分类：Flutter作者：佚名

Flutter DataTable 看这一篇就够了

注意：无特殊说明，Flutter版本及Dart版本如下：

  • Flutter版本： 1.12.13+hotfix.5
  • Dart版本： 2.7.0

DataTable

DataTable控件显示表格数据，DataTable需要设置行和列，用法如下：

DataTable(
  columns: [
    DataColumn(label: Text('姓名')),
    DataColumn(label: Text('年龄')),
  ],
  rows: [
    DataRow(cells: [
      DataCell(Text('老孟')),
      DataCell(Text('18')),
    ]),

  ],
)

columns参数是DataTable的列，rows参数是DataTable的每一行数据，效果如下：

![image-20200303200953329](/Users/mengqingdong/Library/Application Support/typora-user-images/image-20200303200953329.png)

在添加一行数据，只需要添加一个DataRow即可，用法如下：

DataTable(
      ...
      rows: [
        DataRow(cells: [
          DataCell(Text('老孟')),
          DataCell(Text('18')),
        ]),
        DataRow(cells: [
          DataCell(Text('大黄')),
          DataCell(Text('20')),
        ]),
      ],
    )

在表头显示排序图标：

DataTable(
  sortColumnIndex: 1,
  sortAscending: true,
  ...
  )

sortColumnIndex参数表示表格显示排序图标的索引，sortAscending参数表示升序或者降序，效果如下：

Flutter DataTable 看这一篇就够了

这里要注意DataTable本身不能对数据进行排序，这些参数仅仅是外观上的控制。

DataColumn

默认情况下数据是左对齐的，让某一列右对齐只需设置DataColumn中numeric参数true，设置如下：

 DataTable(
  columns: [
    DataColumn(label: Text('姓名')),
    DataColumn(label: Text('年龄'),numeric: true),
  ],
  ...
  )

效果：

Flutter DataTable 看这一篇就够了

设置DataColumn中tooltip参数表示当长安此表头时显示提示，用法如下：

DataColumn(label: Text('姓名'),tooltip: '长按提示')

长按提示：

Flutter DataTable 看这一篇就够了

onSort回调是用户点击表头（DataColumn）时的回调，onSort中第一个参数columnIndex表示索引，ascending参数表示升序或者降序，用法如下：

DataColumn(label: Text('年龄'), onSort: (int columnIndex, bool ascending){
    //排序算法
}),

DataRow

可以显示其中一行被选中，设置DataRow中selected参数为true，用法如下：

DataRow(
  selected: true,
  ...
)

效果如下：

Flutter DataTable 看这一篇就够了

onSelectChanged参数是点击每一行数据时的回调，用法如下：

DataRow(
    onSelectChanged: (selected){
    }
    ...
)

设置了onSelectChanged参数，在数据的每一行和表头的前面显示勾选框，效果如下：

Flutter DataTable 看这一篇就够了

当然现在点击还不能显示选中的效果，增加选中效果，修改User model类，增加selected属性，表示当前行是否选中：

class User {
  User(this.name, this.age, {this.selected = false});

  String name;
  int age;
  bool selected;
}

修改数据：

List<User> data = [
  User('老孟', 18),
  User('老孟1', 19,selected: true),
  User('老孟2', 20),
  User('老孟3', 21),
  User('老孟4', 22),
];

构建DataTable：

List<DataRow> dateRows = [];
    for (int i = 0; i < data.length; i++) {
      dateRows.add(DataRow(
        selected: data[i].selected,
        onSelectChanged: (selected){
          setState(() {
            data[i].selected = selected;
          });
        },
        cells: [
          DataCell(Text('${data[i].name}')),
          DataCell(Text('${data[i].age}')),
        ],
      ));
    }
    return DataTable(columns: [
      DataColumn(label: Text('姓名')),
      DataColumn(
        label: Text('年龄'),
      ),
    ], rows: dateRows);

效果如下：

Flutter DataTable 看这一篇就够了

我们并没有对表头的全选/取消全选勾选框进行控制，一个很大的疑问：点击全选/取消全选勾选框，如果都勾选了，真实数据是否也发生变化了，对应本示例就是User中的selected参数是否全部为true，可以肯定的告诉你User中的selected参数已经全部变为true了，那是如何实现的呢？非常简单，每一行的onSelectChanged都被回调了一次。

DataCell

DataCell是DataRow中每一个子控件，DataCell子控件不一定是文本，也可以是图标等任意组件，我们可以给DataCell设置编辑图标：

DataCell(Text('name'),showEditIcon: true)

效果如下：

Flutter DataTable 看这一篇就够了

当然仅仅是一个图标，placeholder参数也是一样的，设置为true，仅仅是文字的样式变化了，onTap为点击回调，用法如下：

DataCell(Text('name'),showEditIcon: true,onTap: (){
  print('DataCell onTap');
},placeholder: true)

效果如下：

Flutter DataTable 看这一篇就够了

排序

DateTable本身是没有排序功能的，当用户点击表头时对数据按照本列数据进行排序，用法如下，

数据model类：

class User {
  User(this.name, this.age);

  final String name;
  final int age;
}

初始化数据及默认排序：

List<User> data = [
  User('老孟', 18),
  User('老孟1', 19),
  User('老孟2', 20),
  User('老孟3', 21),
  User('老孟4', 22),
];

var _sortAscending = true;

构建DataTable：

DataTable(
    sortColumnIndex: 1,
    sortAscending: _sortAscending,
    columns: [
      DataColumn(label: Text('姓名')),
      DataColumn(label: Text('年龄'), onSort: (int columnIndex, bool ascending){
        setState(() {
          _sortAscending = ascending;
          if(ascending){
            data.sort((a, b) => a.age.compareTo(b.age));
          }else {
            data.sort((a, b) => b.age.compareTo(a.age));
          }
        });
      }),
    ],
    rows: data.map((user) {
      return DataRow(cells: [
        DataCell(Text('${user.name}')),
        DataCell(Text('${user.age}')),
      ]);
    }).toList())

效果如下：

Flutter DataTable 看这一篇就够了

如果想给姓名列也加上排序呢，修改如下：

var _sortAscending = true;
var _sortColumnIndex =0;
DataTable(
        sortColumnIndex: _sortColumnIndex,
        sortAscending: _sortAscending,
        columns: [
          DataColumn(label: Text('姓名'),onSort: (int columnIndex, bool ascending){
            setState(() {
              _sortColumnIndex = columnIndex;
              _sortAscending = ascending;
              if(ascending){
                data.sort((a, b) => a.name.compareTo(b.name));
              }else {
                data.sort((a, b) => b.name.compareTo(a.name));
              }
            });
          }),
          DataColumn(label: Text('年龄'), onSort: (int columnIndex, bool ascending){
            setState(() {
              _sortColumnIndex = columnIndex;
              _sortAscending = ascending;
              if(ascending){
                data.sort((a, b) => a.age.compareTo(b.age));
              }else {
                data.sort((a, b) => b.age.compareTo(a.age));
              }
            });
          }),
        ],
        ...
)

效果如下：

Flutter DataTable 看这一篇就够了

处理数据显示不全问题

当表格列比较多的时候，可以使用SingleChildScrollView包裹DataTable，显示不全时滚动显示，用法如下：

List<DataRow> dateRows = [];
for (int i = 0; i < data.length; i++) {
  dateRows.add(DataRow(
    cells: [
      DataCell(Text('${data[i].name}')),
      DataCell(Text('${data[i].age}')),
      DataCell(Text('男')),
      DataCell(Text('2020')),
      DataCell(Text('10')),
    ],
  ));
}
return SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: DataTable(columns: [
    DataColumn(label: Text('姓名')),
    DataColumn(
      label: Text('年龄'),
    ),
    DataColumn(
      label: Text('性别'),
    ),
    DataColumn(
      label: Text('出生年份'),
    ),
    DataColumn(
      label: Text('出生月份'),
    ),
  ], rows: dateRows),
);

效果如下：

Flutter DataTable 看这一篇就够了

今天的文章对大家是否有帮助？如果有，请在文章底部留言和点赞，以表示对我的支持，你们的留言、点赞和转发关注是我持续更新的动力！

Flutter DataTable 看这一篇就够了

更多相关阅读：

原文地址：https://blog.51cto.com/11206976/2475516

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

dart系列之:在dart中使用packages
简介 java中使用jar包来封装有用的功能，然后将其分发到maven仓库中，供其他人使用。同样的在dart中也有类似的概念叫做packages。packages就是可以用来共享的软件包，可以包含libraries和tools。 你可以在pub.dev网站中查到dart中所有的共享packages的
dart系列之:dart语言中的变量
简介 flutter是google在2015年dart开发者峰会上推出的一种开源的移动UI构建框架,使用flutter可以非常方便的编译成运行在原始android,ios,web等移动平台上的移动应用。 flutter是使用dart来编写的，最新的flutter版本是2.5.3,而最新的Dart语言
dart系列之:dart类中的构造函数
简介 dart作为一种面向对象的语言，class是必不可少的。dart中所有的class,除了Null都继承自Object class。 要想使用dart中的类就要构造类的实例，在dart中，一个类的构造函数有两种方式，一起来看看吧。 传统的构造函数 和JAVA一样，dart中可以使用和class名
dart系列之:dart语言中的异常
简介 Exception是程序中的异常情况，在JAVA中exception有checked Exception和unchecked Exception。那么在dart中的情况是不是一样的呢？一起来看看吧。 Exception和Error Dart中表示异常的类有两个，分别是Exception和Err
dart系列之:dart类的扩展
简介 虽然dart中的类只能有一个父类，也就是单继承的，但是dart提供了mixin语法来绕过这样限制。 今天，和大家一起来探讨一下dart类中的继承。 使用extends 和JAVA一样，dart中可以定义一个父类，然后使用extends来继承他，得到一个子类，如下所示： class Studen
dart系列之:元世界pubspec.yaml文件详解
简介 pubspec.yaml是所有dart项目的灵魂，它包含了所有dart项目的依赖信息和其他元信息，所以pubspec.yaml就是dart项目的meta! pubspec.yaml支持的字段 根据dart的定义，pubspec.yaml中可以包含下面的字段: 字段名 是否必须字段 描述 nam
dart系列之:dart语言中的特殊操作符
dart系列之:dart语言中的特殊操作符 简介 有运算就有操作符，dart中除了普通的算术运算的操作符之外，还有自定义的非常特殊的操作符，今天带大家一起来探索一下dart中的特殊操作符。 普通操作符 普通操作符就很好解释了，就是加减乘除，逻辑运算符，比较运算符和位运算符等。 这些操作符和其他语言的
dart系列之:创建Library package
简介 在dart系统中，有pubspec.yaml文件的应用就可以被成为一个package。而Libray package是一类特殊的package，这种包可以被其他的项目所依赖. 也就是通常所说的库。 如果你也想你写的dart程序可以上传到pub.dev上，或者提供给别人使用，则来看看这篇文章吧。
dart系列之:dart语言中的内置类型
简介 和所有的编程语言一样，dart有他内置的语言类型，这些内置类型都继承自Object，当然这些内置类型是dart语言的基础，只有掌握了这些内置类型才能够在使用dart语言的时候得心应手。 今天就给大家讲解一下dart语言的内置类型。 Null 在dart中用null来表示空。那么null和Nul
dart系列之:dart语言中的函数
简介 函数是所有编程语言都有的内容，不管是面向对象还是面向过程，函数都是非常重要的一部分。dart中的函数和java中的函数有什么区别呢？ dart作为一种面向对象的编程语言，它的函数也是一个对象，用Function来表示。先看下函数的定义： abstract class Function { ex
dart系列之:dart类中的泛型
简介 熟悉JAVA的朋友可能知道，JAVA在8中引入了泛型的概念。什么是泛型呢？泛型就是一种通用的类型格式，一般用在集合中，用来指定该集合中应该存储的对象格式。 有了泛型可以简化我们的编程，并且可以减少错误的产生，非常的方便。 dart语言中也有泛型。一起来看看吧。 为什么要用泛型 使用泛型的主要目
dart系列之:dart中的异步编程
简介 熟悉javascript的朋友应该知道，在ES6中引入了await和async的语法，可以方便的进行异步编程,从而摆脱了回调地狱。dart作为一种新生的语言，没有理由不继承这种优秀的品质。很自然的，dart中也有await和async语言，一起来看看吧。 为什么要用异步编程 那么为什么要用异步
dart系列之:在dart中使用数字和字符串
简介 要想熟悉一种语言，最简单的做法就是熟悉dart提供的各种核心库。dart为我们提供了包括dart:core,dart:async,dart:math,dart:convert,dart:html和dart:io这几种常用的库。 今天给大家介绍一下dart:core中的数字和字符串的使用。 数字
dart系列之:在dart中使用生成器
简介 ES6中在引入异步编程的同时，也引入了Generators,通过yield关键词来生成对应的数据。同样的dart也有yield关键词和生成器的概念。 什么时候生成器呢？所谓生成器就是一个能够持续产生某些数据的装置,也叫做generator。 两种返回类型的generator 根据是同步生成还是
flutter系列之:用来管理复杂状态的State详解
简介 Flutter的基础是widget,根据是否需要跟用户进行交互，widget则可以分为StatelessWidget和StatefulWidget。StatelessWidget只能根据传入的状态进行简单的初始化widget，如果要实现跟用户交互这种复杂的功能，则需要用到StatefulWid
dart系列之:时间你慢点走,我要在dart中抓住你
简介 时间和日期是我们经常会在程序中使用到的对象。但是对时间和日期的处理因为有不同时区的原因，所以一直以来都不是很好用。就像在java中，为时间和日期修改和新增了多次API，那么作为新生的语言dart而言，会有什么不一样的地方吗？ dart中关于日期和时间的两个非常重要的类是DateTime和Dur
dart系列之:手写Library,Library编写最佳实践
简介 Library是dart用来组织代码的一种非常有用的方式，通过定义不同的Library，可以将非常有用的dart代码进行封装，从而提供给其他的项目使用。虽然我们可以自由使用import或者export来对library进行导入和导入。但是什么样的用法才是最合适的用法呢？ 一起来看看吧。 使用p
没有人比我更会使用集合！对, 是dart中的集合
简介 dart中的集合有三个，分别是list，set和map。dart在dart:core包中提供了对于这三种集合非常有用的方法，一起来看看吧。 List的使用 首先是list的创建,可以创建空的list或者带值的list： var emptyList =[]; var nameList = [&#
dart系列之:浏览器中的舞者,用dart发送HTTP请求
简介 dart:html包为dart提供了构建浏览器客户端的一些必须的组件，之前我们提到了HTML和DOM的操作，除了这些之外，我们在浏览器端另一个常用的操作就是使用XMLHttpRequest去做异步HTTP资源的请求，也就是AJAX请求。 dart同样提供了类似JS中XMLHttpRequest
flutter系列之:flutter架构什么的,看完这篇文章就全懂了
简介 Flutter是google开发的一个跨平台的UI构建工具，flutter目前最新的版本是3.0.5。使用flutter你可以使用一套代码搭建android，IOS，web和desktop等不同平台的应用。做到一次编写到处运行的目的。 说到一次编写处处运行，大家可能会想到java。那么flut
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot