Flutter 多选底部弹层实现详解
![Flutter 多选底部弹层实现详解](https://static001.geekbang.org/infoq/d6/d6ba3f303efe777f950fb3527308d341.png)
在上一篇中我们介绍了底部弹窗的实现,但是都是单选的例子。写完后琢磨了一下如何实现多选,这也是很常用的一个功能。本篇介绍实现多选的思路和实现方式。
多选和单选的不同之处
单选的时候,选中一个就可以直接把结果返回,因此本身底部弹窗无需状态管理。但到多选的时候,需要知道当前选中的选项,有选项被点击的时候需要存储下来,当再次被点击的时候要清空这个选项,同时界面还需要同步更新,因此就涉及到状态管理了。
实现方式
在 Flutter 中提供了一个 StatefulBuilder
的类,提供了一个 builder
方法构建有状态组件,并且提供了状态更新方法,因此在里面完成状态管理。
在这个 builder
方法中,setState
其实就是对应状态组件的setState
对应的方法,这个 state 就是用于控制 StatefulBuilder
生成的组件的状态的。这种方式有点类似于 React
的 useState
的钩子函数用法。
界面变更
首先底部弹窗的头部组件要更换,需要增加确认按钮,将构建该组件的方法抽离出来如下所示:
通过这个方法可以通过外部参数传入标题,取消响应事件回调和确认事件回调,通用性更强。
其次是选项需要有图标标记,选中时显示为勾选框,未选中时是空白框,这需要通过状态数据来控制。这里我们使用了 Set 类型,保证选中的数据集是不重复的。在点击选项时,如果选项对应数组的下标在 Set 内,则从中移出,表示取消选择;如果不在 Set 内,则加入其中,表示选中。这个过程需要包在 state 里,以更新界面。通过列表元素当前的下标是否在 Set 内,如果在则显示为选中,不在则显示未选中。
最后是确认事件的回调,确认后将 Set 的元素转换为数组返回,然后供上级业务使用选中的下标数组判断选择了那些数据。
代码实现
关键代码实现如下,重点关注一下StatefulBuilder
的使用和利用 Set 这一数据类型对应的选择和取消选择的操作业务逻辑。
总结
本篇介绍了底部弹窗实现多选的方式,其中实现的方式还可以有很多种,例如直接在自定义组件中使用有状态组件。这里介绍的方法可以作为一个参考,通过动态构建有状态组件能够简单快速地实现底部弹窗的多选功能。
![](https://static001.geekbang.org/infoq/ae/aedf1f5c1ffb13d2b13ed02577a6f3a0.jpeg?x-oss-process=image/resize,p_80/auto-orient,1)
版权声明: 本文为 InfoQ 作者【岛上码农】的原创文章。
原文链接:【http://xie.infoq.cn/article/f799f647f098c804fc1006bf4】。文章转载请联系作者。
评论