Flutter 实现多选弹窗

最新推荐文章于 2024-05-30 09:56:02 发布
最新推荐文章于 2024-05-30 09:56:02 发布
阅读量775 收藏 1
点赞数 1
分类专栏： Flutter 入门与实战 文章标签： Flutter Dart App 开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shuijian00/article/details/121527176
版权
本文介绍了在Flutter中如何实现多选底部弹窗，包括多选与单选的区别、实现思路、状态管理以及关键代码实现。使用有状态组件和Set数据类型来管理选中状态，并通过状态更新同步界面。
摘要由CSDN通过智能技术生成

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

屏幕录制2021-06-09 下午10.57.51.gif
多选和单选的不同之处

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

实现方式

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

了解本专栏 订阅专栏 解锁全文 超级会员免费看
岛上码农
关注
专栏目录
Flutter 入门与实战（十三）：底部弹窗如何实现多项选择？
2401_84519960的博客
04-30 577
onCancel();},),Expanded(title,),),),),}),],),通过这个方法可以通过外部参数传入标题，取消响应事件回调和确认事件回调，通用性更强。​其次是选项需要有图标标记，选中时显示为勾选框，未选中时是空白框，这需要通过状态数据来控制。这里我们使用了 Set 类型，保证选中的数据集是不重复的。在点击选项时，如果选项对应数组的下标在 Set 内，则从中移出，表示取消选择；
Flutter - 级联选择器组件（多维数组或树形结构、支持搜索）
iotjin的专栏
09-12 3677
Flutter - 级联选择器组件（多维数组或树形结构、支持搜索）二个级联选择器组件，支持两种不同的数据结构。一种是树形结构数据、支持搜索。一种是多维数组结构数据。
Flutter Checkbox 复选框
10-11
Flutter 复选框 有两种：一 是精简版Checkbox复选框 ，二是自带标题和副标题CheckboxListTile复选框
Flutter-底部弹出框（Widget层级）
dalong的博客
03-18 2020
想到这里我们其实会想到一个控件DraggableScrollableSheet，Flutter提供一种可以支持在widget中引入的底部弹出布局，同时不影响其他的操作，所以我就使用这个控件测试了下，发现一个问题，就是当底部弹出框内容为上面有个头部，底部是个列表时，每次都需要列表滑动到顶部的时候才可以手势滑动关闭，所以需要支持触摸顶部布局也支持手势滑动关闭，所以在此控件上做一个修改。完整代码见：https://github.com/yixiaolunhui/flutter_xy。
Flutter - 底部多选弹框组件
iotjin的专栏
10-09 1539
有时需要弹框选择多个数据，因此写了个底部多选弹框组件支持搜索，设置默认选中数据，暗黑模式适配。
弹窗多选，引入即用，非常简单
12-10
调用非常简单的弹窗多选，再也不用一遍遍写弹窗啦，很方便
推荐使用：Flutter 多选组件库 —— Multi Select Flutter
最新发布
gitblog_00018的博客
05-30 1195
推荐使用：Flutter 多选组件库 —— Multi Select Flutter multi_select_flutterA flexible multi select package for Flutter. Make multi select widgets the way you want.项目地址:https://gitcode.com/gh_mirrors/mu/multi_sel...
Android dialog单选、多选弹窗
07-14
在标题"Android dialog单选、多选弹窗"中，我们主要关注的是两种类型的Dialog：单选对话框（Radio Button Dialog）和多选对话框（Checkbox Dialog），以及可能涉及到的PopWindow窗口。 1. **单选对话框**： 单选...
Flutter 入门与实战（十三）：底部弹窗如何实现多项选择？(1)
2401_84519960的博客
04-30 369
这里我希望可以帮助到大家提升进阶。Android学习PDF+架构视频+面试文档+源码笔记高级架构技术进阶脑图、Android开发面试专题资料，高级进阶架构资料这几块的内容。非常适合近期有面试和想在技术道路上继续精进的朋友。喜欢本文的话，不妨给我点个小赞、评论区留言或者转发支持一下呗~网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化学习资料的朋友，可以戳这里获取一个人可以走的很快，但一群人才能走的更远！
动态多选弹出框
06-01
多功能动态多选弹出窗
仿ios底部弹出选择框
01-10
类似微信相机或图片选择框
Android实现底部弹窗效果
01-05
本文实例为大家分享了Android实现底部弹窗效果的具体代码，供大家参考，具体内容如下 源代码地址：https://github.com/luoye123/Box 东西很简单，我就直接亮代码了： 1、activity_main.xml <?xml version=1.0 encoding=utf-8?> <LinearLayout xmlns:android=http://schemas.android.com/apk/res/android android:layout_width=fill_parent android:layout_height=fill_
flutter 长按弹出菜单,删除,分享,更多,撤回.
仰望星空
01-28 2288
#### 最近在开发IM软件,需要做:长按弹出菜单,删除,分享,更多,撤回. #### 先看看效果是不是你想要的 ![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC8xLzI4LzE2ZmViNDZlZDg5MWU0YWI?x-oss-process=image/format,png) ...
hqs-popup弹窗实现多选（uni-app）
github_53963510的博客
04-06 595
基于uni-popup实现，增加了手势滑动关闭弹窗功能，体验和抖音评论下滑关闭类似。功能如下： 可手动调整弹窗大小，并滑动关闭弹窗。也可关闭手动操作 可根据自己实际需要调整弹出方向 根据自己需要可自己设置点击遮罩层是否关闭弹窗
Flutter - 快速点击弹出多个弹框优化
iotjin的专栏
03-17 515
在 _showBottomSheet 方法中，如果底部菜单未打开，我们将 _isBottomSheetOpen 设置为 true，并调用 showModalBottomSheet 方法打开底部菜单。在 Flutter 中使用 showModalBottomSheet 弹出底部菜单时，如果用户快速点击多次会弹出多个底部菜单，这会影响用户体验。为了避免这种情况发生，我们可以使用一个 flag 来控制底部菜单是否已经打开，只有在底部菜单关闭之后才能再次打开。
Flutter：使用复选框进行下拉多选
坚果的博客
01-03 3278
Flutter：使用复选框进行下拉多选 本文向您展示了在 Flutter 中使用复选框实现下拉多选的两种不同方法。在第一种方法中，我们将从头开始构建多选。在第二种方法中，我们将使用第三方包快速完成工作。 从头开始使用复选框创建多选 应用预览 我们将要构建的应用程序有一个专业的、功能齐全的多选小部件，可显示选项列表。可以通过选中/取消选中与其关联的复选框来选择或取消选择一个选项。 当按下升高的按钮时，将显示多选对话框。它让用户在编程中选择他们最喜欢的主题。所选主题将作为筹码显示在屏幕上。 以下是我们的应用程
【flutter】多选
ivy_doudou的博客
07-31 1092
List<bool> boolList = List<bool>();//暂存多选false/true List<Map> _selctlist = [ {'name': '农药', 'value': '农药'}, {'name': '化肥', 'value': '化肥'}, {'name': '种子', 'value': '种子'} ...
Flutter - 底部弹窗 showModalBottomSheet自定义bottom弹框
GY5338的博客
01-06 787
Flutter - showModalBottomSheet自定义bottom弹框代码撂这儿了 代码撂这儿了 import 'package:flutter/material.dart'; class AlertGridItem extends Object { final String title; final int codePoint; // 图标使用的iconfont昂 AlertGridItem(this.title, this.codePoint); } // Util
flutter listview列表多选实现
05-24
Flutter中的`ListView`并不支持多选，但我们可以通过自定义`ListView`来实现多选功能。 首先，我们需要定义一个数据模型类，来表示每一个列表项。这个类至少需要包含两个属性：`title`和`selected`，分别表示列表项的标题和是否被选中。 ```dart class ListItem { String title; bool selected; ListItem({this.title, this.selected = false}); } ``` 然后，我们可以使用`ListView.builder`来构建列表。在构建列表项时，我们需要根据`selected`属性来决定是否显示选中状态的图标。 ```dart ListView.builder( itemCount: items.length, itemBuilder: (BuildContext context, int index) { return InkWell( onTap: () { setState(() { items[index].selected = !items[index].selected; }); }, child: Row( children: [ Checkbox( value: items[index].selected, onChanged: (_) { setState(() { items[index].selected = !items[index].selected; }); }, ), Text(items[index].title), if (items[index].selected) Icon(Icons.check), ], ), ); }, ) ``` 在以上代码中，使用了`InkWell`组件来监听列表项的点击事件，并在点击时修改`selected`属性。同时，使用了`Checkbox`组件来实现选中状态的切换，当然你也可以使用其他组件来替代它。 最后，我们需要在`State`类中维护一个`items`列表来存储所有的列表项。在多选操作完成后，我们可以通过遍历`items`列表来获取所有被选中的列表项。 ```dart List<ListItem> items = [ ListItem(title: 'Item 1'), ListItem(title: 'Item 2'), ListItem(title: 'Item 3'), ]; List<ListItem> getSelectedItems() { return items.where((item) => item.selected).toList(); } ``` 这样，我们就完成了一个基本的多选列表。当然，你还可以为列表项添加更多的属性和功能，让它更加丰富和实用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

岛上码农

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值