2024年Android最新Flutter 入门与实战（十三）：底部弹窗如何实现多项选择？(1)，2024年最新音视频开发面试问题-CSDN博客

本文链接：https://blog.csdn.net/2401_84544495/article/details/138852383

最后

在这里小编整理了一份Android大厂常见面试题，和一些Android架构视频解析，都已整理成文档，全部都已打包好了，希望能够对大家有所帮助，在面试中能顺利通过。

喜欢本文的话，不妨顺手给我点个小赞、评论区留言或者转发支持一下呗

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

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> _showMultiChoiceModalBottomSheet(
BuildContext context, List options) async {
Set selected = Set();
return showModalBottomSheet<List>(
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);