返回顶部
首页 > 资讯 > 移动开发 >Flutter多项选择弹窗实现详解
  • 441
分享到

Flutter多项选择弹窗实现详解

2024-04-02 19:04:59 441人浏览 泡泡鱼
摘要

目录多选和单选的不同之处实现方式界面变更代码实现总结在Flutter 底部弹窗详解一篇中介绍了底部弹窗的实现。发出后有在琢磨如何实现多选,这也是很常用的一个功能。本篇介绍实现多选的思

Flutter 底部弹窗详解一篇中介绍了底部弹窗的实现。发出后有在琢磨如何实现多选,这也是很常用的一个功能。本篇介绍实现多选的思路和实现方式。

屏幕录制2021-06-09 下午10.57.51.gif

多选和单选的不同之处

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

实现方式

在Flutter 中提供了一个 StatefulBuilder 的类,提供了一个 builder方法构建有状态组件,并且提供了状态更新方法,因此在里面完成状态管理。


StatefulBuilder(builder: (context1, setState) {
  	return Widget;
	}
)

在这个 builder 方法中,setState 其实就是对应状态组件的setState 对应的方法,这个 state 就是用于控制 StatefulBuilder 生成的组件的状态的。这种方式有点类似于 ReactuseState 的钩子函数用法。

界面变更

首先底部弹窗的头部组件要更换,需要增加确认按钮,将构建该组件的方法抽离出来如下所示:


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,
              ),
            ),
          ]),
        );
      });
    },
  );
}

总结

本篇介绍了底部弹窗实现多选的方式,其中实现的方式还可以有很多种,例如直接在自定义组件中使用有状态组件。这里介绍的方法可以作为一个参考,通过动态构建有状态组件能够简单快速地实现底部弹窗的多选功能。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: Flutter多项选择弹窗实现详解

本文链接: https://lsjlt.com/news/158788.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Flutter多项选择弹窗实现详解
    目录多选和单选的不同之处实现方式界面变更代码实现总结在Flutter 底部弹窗详解一篇中介绍了底部弹窗的实现。发出后有在琢磨如何实现多选,这也是很常用的一个功能。本篇介绍实现多选的思...
    99+
    2024-04-02
  • Flutter 底部弹窗如何实现多项选择
    目录多选和单选的不同之处 实现方式 界面变更 代码实现 总结 多选和单选的不同之处 单选的时候,选中一个就可以直接把结果返回,因此本身底部弹窗无需状态管理。但到多选的时候,需要知...
    99+
    2024-04-02
  • vue实现底部弹窗多选
    本文实例为大家分享了vue实现底部弹窗多选的具体代码,供大家参考,具体内容如下 代码: <template> <div class="release-...
    99+
    2024-04-02
  • Flutter实现底部弹窗效果
    目录实现效果代码结构基本使用自定义底部弹窗总结在实际开发过程中,经常会用到底部弹窗来进行快捷操作,例如选择一个选项,选择下一步操作等等。在 Flutter 中提供了一个 showMo...
    99+
    2024-04-02
  • vue实现弹窗翻页多选效果
    本文实例为大家分享了vue实现弹窗翻页多选效果的具体代码,供大家参考,具体内容如下 最终效果 点选择按钮后,弹出选择用户弹窗,可翻页勾多个用户  完整代码 <te...
    99+
    2024-04-02
  • Android实现单项、多项选择操作
    本文实例为大家分享了Android实现单项、多项选择操作的相关代码,供大家参考,具体内容如下 1、单项选择 1.1.布局 <?xml version="1....
    99+
    2022-06-06
    选择 Android
  • flutter如何实现更新弹窗内容例子
    这篇文章将为大家详细讲解有关flutter如何实现更新弹窗内容例子,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。什么是FlutterFlutter 是谷歌推出的开发移动UI框架,可以快速的在IOS和And...
    99+
    2023-06-14
  • Flutter实现自定义下拉选择框的示例详解
    在一些列表页面中,我们经常会有上方筛选项的的需求,点击出现一个下拉菜单,多选、单选、列表选等,而在Flutter中,并没有现成的这样的组件,找第三方的扩展有时候又会受到一定限制,所以...
    99+
    2024-04-02
  • Android超详细讲解弹出多选框的实现
    目录程序代码功能:点击一个按钮弹出一个多选框 在activity_main.xml布局一个button控件,大小,颜色,位置,背景可自行调节,以被用来在MainActivity.ja...
    99+
    2024-04-02
  • Flutter实现滚动选择数字
    本文实例为大家分享了Flutter实现滚动选择数字的具体代码,供大家参考,具体内容如下 前言 本来想百度查的,结果没查到,只有自己写,顺便记录一下,加深印象 页面需求要用户输入页码,...
    99+
    2024-04-02
  • Python Socket实现远程木马弹窗详解
    目录基础知识服务端(server)程序客户端(client)程序其他命令执行函数该木马程序的基本用法1、查看文件内容2、查看文件目录3、创建文件或目录4、调用windows应用程序5...
    99+
    2024-04-02
  • Vue弹窗的两种实现方式实例详解
    目录方法一 使用.sync修饰符方法二 使用v-model方法一 使用.sync修饰符 element就是使用的这种方式,实现方式如下: 父组件: <template> ...
    99+
    2022-11-13
    vue弹窗实现 vue弹窗
  • flutter实现更新弹窗内容例子(亲测有效)
    什么是Flutter Flutter 是谷歌推出的开发移动UI框架,可以快速的在IOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作,并且Flu...
    99+
    2024-04-02
  • 详解JavaScript实现JS弹窗的三种方式
    目录一、前言二、什么是JavaScript,有什么用三、HTML嵌入JavaScript的方式:第一种方式:第二种方式:第三种方式:总结一、前言 html和css的学习大致完成,我们...
    99+
    2024-04-02
  • flutter实现appbar下选项卡切换
    本文实例为大家分享了flutter实现appbar下选项卡切换的具体代码,供大家参考,具体内容如下 TabBar 、Tab、TabBarView 结合实现 这里实现的是appbar...
    99+
    2024-04-02
  • Flutter怎么实现滚动选择数字
    这篇“Flutter怎么实现滚动选择数字”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Flutter怎么实现滚动选择数字”文...
    99+
    2023-06-29
  • Android Flutter实现弹簧动画交互的示例详解
    目录1.创建一个动画控制器2.使用手势移动Widget3.创建一个动画Widget4.计算速度以模拟弹簧运动物理模拟可以让应用程序的交互感觉逼真和互动,例如,你可能希望为一个 Wid...
    99+
    2023-05-18
    Android Flutter弹簧动画交互 Flutter弹簧动画交互 Android 动画交互
  • JavaScriptiframe实现多窗口通信实例详解
    目录引言iframe 基本通信基本的 HTML 结构使用 JavaScript 在窗口之间发送消息注意事项类型如何传递函数并执行如何在父窗口访问到子窗口的 console引言 我最近...
    99+
    2024-04-02
  • Vue实现通知或详情类弹窗
    本文实例为大家分享了Vue实现通知或详情类弹窗的具体代码,供大家参考,具体内容如下 效果如图所示:(整体样式模仿ant-design-vue Modal样式,同时阴影覆盖浏览器窗口,...
    99+
    2024-04-02
  • Android开发实现多进程弹窗效果
    安卓开发之多进程弹窗,供大家参考,具体内容如下 背景 有时在弹窗绘图时,需要弹窗在新的进程中,以保证在弹窗绘图的过程中不会占用过多的内存导致主进程被关。 代码实现 子进程弹窗 首先我...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作