Flutter 底部弹窗如何实现多项选择
多选和单选的不同之处
单选的时候，选中一个就可以直接把结果返回，因此本身底部弹窗无需状态管理。但到多选的时候，需要知道当前选中的选项，有选项被点击的时候需要存储下来，当再次被点击的时候要清空这个选项，同时界面还需要同步更新，因此就涉及到状态管理了。
实现方式
在Flutter 中提供了一个 StatefulBuilder 的类，提供了一个 builder方法构建有状态组件，并且提供了状态更新方法，因此在里面完成状态管理。
StatefulBuilder(builder: (context1, setState) {
return Widget;
}
)
在这个 builder 方法中，setState 其实就是对应状态组件的setState 对应的方法，这个 state 就是用于控制 StatefulBuilder 生成的组件的状态的。这种方式有点类似于 React 的 useState 的钩子函数用法。
界面变更
首先底部弹窗的头部组件要更换，需要增加确认按钮，将构建该组件的方法抽离出来如下所示：
Widget _getModalSheetHeaderWithConfirm(String title,
{Function onCancel, Function onConfirm}) {
return SizedBox(
height: 50,
child: Row(
children: [
IconButton(
icon: Icon(Icons.close),
onPressed: () {
onCancel();
},
),
Expanded(
child: Center(
child: Text(
title,
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16.0),
),
),
),
IconButton(
icon: Icon(
Icons.check,
color: Colors.blue,
),
onPressed: () {
onConfirm();
}),
],
),
);
}
通过这个方法可以通过外部参数传入标题，取消响应事件回调和确认事件回调，通用性更强。
其次是选项需要有图标标记，选中时显示为勾选框，未选中时是空白框，这需要通过状态数据来控制。这里我们使用了 Set 类型，保证选中的数据集是不重复的。在点击选项时，如果选项对应数组的下标在 Set 内，则从中移出，表示取消选择；如果不在 Set内，则加入其中，表示选中。这个过程需要包在 state 里，以更新界面。通过列表元素当前的下标是否在 Set 内，如果在则显示为选中，不在则显示未选中。
最后是确认事件的回调，确认后将 Set 的元素转换为数组返回，然后供上级业务使用选中的下标数组判断选择了那些数据。
代码实现
关键代码实现如下，重点关注一下StatefulBuilder的使用和利用 Set 这一数据类型对应的选择和取消选择的操作业务逻辑。
Future<List<int>> _showMultiChoiceModalBottomSheet(
BuildContext context, List<String> options) async {
Set<int> selected = Set<int>();
return showModalBottomSheet<List<int>>(
backgroundColor: Colors.transparent,
isScrollControlled: true,
context: context,
builder: (BuildContext context) {
return StatefulBuilder(builder: (context1, setState) {
return Container(
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: const Radius.circular(20.0),
topRight: const Radius.circular(20.0),
),
),
height: MediaQuery.of(context).size.height / 2.0,
child: Column(children: [
_getModalSheetHeaderWithConfirm('多选底部弹窗',
onCancel: () {
Navigator.of(context).pop();
},
onConfirm: () {
Navigator.of(context).pop(selected.toList());
},
),
Divider(height: 1.0),
Expanded(
child: ListView.builder(
itemBuilder: (BuildContext context, int index) {
return ListTile(
trailing: Icon(
selected.contains(index)
? Icons.check_box
: Icons.check_box_outline_blank,
color: Theme.of(context).primaryColor),
title: Text(options[index]),
onTap: () {
setState(() {
if (selected.contains(index)) {
selected.remove(index);
} else {
selected.add(index);
}
});
},
);
},
itemCount: options.length,
),
),
]),
);
});
},
);
}
总结
本篇介绍了底部弹窗实现多选的方式，其中实现的方式还可以有很多种，例如直接在自定义组件中使用有状态组件。这里介绍的方法可以作为一个参考，通过动态构建有状态组件能够简单快速地实现底部弹窗的多选功能。
以上就是Flutter 底部弹窗如何实现多项选择的详细内容，更多关于Flutter 底部弹窗实现多项选择的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了Android之FanLayout制作圆弧滑动效果，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-08-08
这篇文章主要为大家详细介绍了Android如何通过自定义ViewGroup实现侧滑菜单，文中的示例代码讲解详细，感兴趣的小伙伴可以了解一下2023-01-01
这篇文章主要介绍了Android gradle配置抽取合并的操作步骤,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-11-11
这篇文章主要为大家详细介绍了如何打造酷炫的AndroidStudio插件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
相信大家对QQ侧滑菜单的效果已经不陌生了吧,侧滑进入个人头像一侧,进行对头像的更改,我的收藏,QQ钱包,我的文件等一系列的操作，下面小编给大家分享Android_UI 仿QQ侧滑菜单效果的实现，一起看看吧2017-04-04
这篇文章主要介绍了Android自定义View基础开发之图片加载进度条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-08-08
这篇文章主要介绍了Android4.4 WebAPI实现拍照上传功能，本文给出4.4版本后拍照上传的具体实现方法，感兴趣的小伙伴们可以参考一下2016-07-07
这篇文章主要介绍了Flutter 控制屏幕旋转的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-09-09
Android studio 项目手动在本地磁盘中删除module后,残留文件夹无法删除的问题解决方法
这篇文章主要介绍了Android studio 项目手动在本地磁盘中删除module后，残留文件夹无法删除问题,本文给出了解决方法，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-03-03
这篇文章主要为大家详细介绍了Android实现带有指示器的自定义底部导航栏，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-04-04
最新评论