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 {