DataTable中的数据选择功能


我们在上一章回中介绍了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()方法动态修改,这样才能刷新界面。

全部选择

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

talk_8

真诚赞赏,手有余香

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值