Flutter 底部弹窗如何实现多项选择

 更新时间:2021年06月15日 09:06:57   作者:岛上码农  
在Flutter中提供了一个showModelBottomSheet方法用于弹出底部弹窗,本篇基于这个方法介绍实现底部弹窗多选的思路和方式。

多选和单选的不同之处

单选的时候,选中一个就可以直接把结果返回,因此本身底部弹窗无需状态管理。但到多选的时候,需要知道当前选中的选项,有选项被点击的时候需要存储下来,当再次被点击的时候要清空这个选项,同时界面还需要同步更新,因此就涉及到状态管理了。

实现方式

在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小组件添加到主屏幕(手机桌面)的方法实例

    Android小组件添加到主屏幕(手机桌面)的方法实例

    很多在多年前使用过Android手机的朋友,可能对于Android 4.0时代盛行的桌面小组件功能有着很深的印象,下面这篇文章主要给大家介绍了关于Android小组件添加到主屏幕(手机桌面)的相关资料,需要的朋友可以参考下
    2023-06-06
  • Android实现自定义验证码输入框效果(实例代码)

    Android实现自定义验证码输入框效果(实例代码)

    这篇文章主要介绍了Android实现自定义验证码输入框效果,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-01-01
  • Android Activity状态与操作探究

    Android Activity状态与操作探究

    Activity作为Android四大组件之一,他的启动绝对没有那么简单。这里涉及到了系统服务进程,启动过程细节很多,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值
    2022-12-12
  • VerticalBannerView仿淘宝头条实现垂直轮播广告

    VerticalBannerView仿淘宝头条实现垂直轮播广告

    这篇文章主要为大家详细介绍了VerticalBannerView仿淘宝头条实现垂直轮播广告,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-08-08
  • Android 中Banner的使用详解

    Android 中Banner的使用详解

    这篇文章主要介绍了Android 中Banner的使用详解,需要的朋友可以参考下
    2017-06-06
  • Android实现进度条(ProgressBar)的功能与用法

    Android实现进度条(ProgressBar)的功能与用法

    这篇文章主要为大家详细介绍了Android实现进度条(ProgressBar)的功能与用法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08
  • Android实现拍照及图片显示效果

    Android实现拍照及图片显示效果

    这篇文章主要为大家详细介绍了Android实现拍照及图片显示效果 ,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • Android Q适配之IMEI替换为Android_id

    Android Q适配之IMEI替换为Android_id

    这篇文章主要介绍了Android Q适配之IMEI替换为Android_id,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • android实现播放网络视频

    android实现播放网络视频

    这篇文章主要为大家详细介绍了android实现播放网络视频,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-04-04
  • Android ADB简介、安装及使用详解

    Android ADB简介、安装及使用详解

    ADB 全称为 Android Debug Bridge,起到调试桥的作用,是一个客户端-服务器端程序,其中客户端是用来操作的电脑,服务端是 Android 设备,这篇文章介绍Android ADB简介、安装及使用,感兴趣的朋友跟随小编一起看看吧
    2024-01-01

最新评论