第六十六回：DataTable的选择功能

我们在上一章回中介绍了 DataTable的排序功能相关的内容，本章回中将介绍 DataTable的选择功能.闲话休提，让我们一起Talk Flutter吧。

概念介绍

我们在本文中将要介绍的DataTable选择功能是指对表中的某一行或者多行数据进行选择。在实际项目中数据选择功能是常用的操作，DataTable提供了相关的属性来实现这种功能，本章回中将详细介绍它的使用方法。

使用方法

选择功能分单选和全选，我们会对它们分别进行介绍，首先介绍选择功能的整体实现思路，接着介绍详细的实现方法，下面是实现选择功能的整体思路：

整体思路

单选或者多选

单选或者多选操作由DataRow组件控制，该组件提供了两个属性来实现选择功能，这两个属性的功能如下：

• selected属性：用来控制当前行是否被选择，给它赋值为true，表示当前行被选择，反之当前行未被选择；
• onSelectChanged属性：它是方法类型，当前行被点击时回调该属性对应的方法；实现单选或者多选操作时，只需要在onSelectChange属性对应的方法中使用setState()动态修改selected的属性值就可以。

全部选择

全部选择表示对DataTable表中所有的数据进行选择，该功能由DataTable组件的onSelectAll属性控制，该属性是方法类型，当用户进行全部选择操作时会回调该属性对应的方法，我们只需要在该方法中对每一行的数据进行单选操作就可以。因此，我们可以理解为全部选择操作是建立在单选操作的基础上的。

具体细节

我们在上一小节中介绍了实现选择操作的整体思路，本小节将介绍选择操作具体的细节，接下来我们将分别介绍单选和全部选择的实现细节：

单选或者多选

在给DataRow组件的onSelectChanged属性赋值后会在当前行第一列的左侧显示一个方框（复选框),当前行被选择时方框内出现一个对号，反之对号消失。

点击复选框时会回调onSelectChanged属性对应的方法，该回调方法带有一个参数，参数值只有两种：true和false,分别表示当前行已选择和未选择。在回调方法中获取selected属性对应的值，判断该值是否与回调方法的参数值相等，如果不相等则修改selected属性对应的值，修改需要使用setState()方法动态修改，这样才能刷新界面。

全部选择

全部选择需要给DataTable组件的onSelectAll属性赋值，该属性是方法类型，用户点击位于数据表标题左侧的复选框时会回调该属性对应的方法，该方法带有一个参数，参数值只有两种：true和false,分别表示所有行已选择和未选择。我们只需要在该方法中把参数值赋值给每一行数据的selected属性就可以。注意：赋值操作需要通过setState()方法进行，相当于是动态修改属性值,这点和单选操作完全相同。

示例代码

介绍完选择操作的整体思路和具体细节后，我们通过代码来演示，这样更加直观一些：

单选或者多选

DataRow(
 selected: e.isSelected,
 // selected: e.isSelected,
 onSelectChanged: (value){
   //如果当前行没有被选择，就将其修改为选择，因为点击时才回调此方法
   if(e.isSelected != value) {
     setState(() {
       e.isSelected = value!;
     });
   }
 },
 cells: [
 DataCell(Text(e.name)),
 DataCell(Text(e.age)),
 DataCell(Text(e.classLevel)),
],
),
class Student {
  final String name;
  final String age;
  final String classLevel;
  bool isSelected;

 Student({
   required this.name,
   required this.age,
   required this.classLevel,
   this.isSelected = false,
 });

代码中的e是一个Student类型的对象，该对象是我们自定义的类，我们也给出了该类的代码。在实际项目中大家可以使用其它类型替换它。

全部选择

DataTable(
 //全选操作时回调此方法，会对所有行进行统一的选择或者未选择
 onSelectAll: (value) {
  print("selectAll = $value");

  setState(() {
    for(Student item in dataList) {
      item.isSelected = value!;
    }
  });
},

我们在这里只列出了onSelectAll属性相关的代码，DataTable中的其它代码没有列出，大家可以参考前面章回中介绍DataTable的示例代码。

看官们，关于DataTable选择功能相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!