我们在上一章回中介绍了DataTable的排序功能相关的内容,本章回中将介绍DataTable的选择功能.闲话休提,让我们一起Talk Flutter吧。
1 概念介绍
我们在本文中将要介绍的DataTable选择功能是指对表中的某一行或者多行数据进行选择。在实际项目中数据选择功能是常用的操作,DataTable提供了相关的属性来
实现这种功能,本章回中将详细介绍它的使用方法。
2 使用方法
选择功能分单选和全选,我们会对它们分别进行介绍,首先介绍选择功能的整体实现思路,接着介绍详细的实现方法,下面是实现选择功能的整体思路:
2.1 整体思路
单选或者多选
单选或者多选操作由DataRow组件控制,该组件提供了两个属性来实现选择功能,这两个属性的功能如下:
- selected属性:用来控制当前行是否被选择,给它赋值为true,表示当前行被选择,反之当前行未被选择;
- onSelectChanged属性:它是方法类型,当前行被点击时回调该属性对应的方法;
实现单选或者多选操作时,只需要在onSelectChange属性对应的方法中使用setState()动态修改selected的属性值就可以。
全部选择
全部选择表示对DataTable表中所有的数据进行选择,该功能由DataTable组件的onSelectAll属性控制,该属性是方法类型,当用户进行全部选择操作时会回调该
属性对应的方法,我们只需要在该方法中对每一行的数据进行单选操作就可以。因此,我们可以理解为全部选择操作是建立在单选操作的基础上的。
2.2 具体细节
我们在上一小节中介绍了实现选择操作的整体思路,本小节将介绍选择操作具体的细节,接下来我们将分别介绍单选和全部选择的实现细节:
单选或者多选
在给DataRow组件的onSelectChanged属性赋值后会在当前行第一列的左侧显示一个方框(复选框),当前行被选择时方框内出现一个对号,反之对号消失。点击复选框时
会回调onSelectChanged属性对应的方法,该回调方法带有一个参数,参数值只有两种:true和false,分别表示当前行已选择和未选择。在回调方法中获取selected
属性对应的值,判断该值是否与回调方法的参数值相等,如果不相等则修改selected属性对应的值,修改需要使用setState()方法动态修改,这样才能刷新界面。