Flutter笔记:Widgets Easier组件库(13)- 使用底部弹窗

Flutter笔记
Widgets Easier组件库(13)使用底部弹窗

- 文章信息 - Author: 李俊才 (jcLee95)
Visit me at CSDN: https://jclee95.blog.csdn.net
My WebSitehttp://thispage.tech/
Email: 291148484@163.com.
Shenzhen China
Address of this article:https://blog.csdn.net/qq_28550263/article/details/138425654
HuaWei:https://bbs.huaweicloud.com/blogs/427143

组件库地址

  • Pub.Dev:https://pub.dev/packages/widgets_easier
  • GitHub:https://github.com/jacklee1995/widgets_easier

【介绍】:本文介绍Flutter Widgets Easier组件库中底部弹窗的用法。

flutter-ljc](https://jclee95.blog.csdn.net/)


上一节:《 Widgets Easier组件库(12)- 使用吐丝(Toast) | 下一节:《 Widgets Easier组件库(14)- 使用开关(Switch)


1. 概述

1.1 关于Widgets Easier

本库是一个 Flutter 组件库,旨在提供用于Flutter开发的组件,使得开发者能够更简单地构建出更丰富地界面效果。项目地址为:

  • https://github.com/jacklee1995/widgets_easier

  • https://pub.dev/packages/widgets_easier

1.2 模块安装

在你的Flutter项目中,运行下面的命令:

flutter pub add widgets_easier

即可安装最新版本的 Widgets Easier 库。

2. 底部消息弹窗

底部消息弹窗是消息弹窗的底部版本。你可以使用或禁用图片,指定相关文本,以及按钮的回调等。

例如:

Row(mainAxisAlignment: MainAxisAlignment.spaceAround,children: [SemanticButton(text: 'Primary',type: SemanticEnum.primary,onTap: () => BottomSheets.showInfoSheet(context,title: "Primary Sheet",message: "This is a info bottom sheet.",buttonText: "Close",onTapDismiss: () => Navigator.pop(context),type: SemanticEnum.primary,),),SemanticButton(text: 'Secondary',type: SemanticEnum.secondary,onTap: () => BottomSheets.showInfoSheet(context,title: "Secondary Sheet",message: "This is a info bottom sheet.",buttonText: "Close",onTapDismiss: () => Navigator.pop(context),type: SemanticEnum.secondary,),),SemanticButton(text: 'Info',type: SemanticEnum.info,onTap: () => BottomSheets.showInfoSheet(context,title: "Info Sheet",message: "This is a info bottom sheet.",buttonText: "Close",onTapDismiss: () => Navigator.pop(context),type: SemanticEnum.info,),),SemanticButton(text: 'Success',type: SemanticEnum.success,onTap: () => BottomSheets.showInfoSheet(context,title: "Success Sheet",message: "This is a info bottom sheet.",buttonText: "Close",onTapDismiss: () => Navigator.pop(context),type: SemanticEnum.success,),),SemanticButton(text: 'Warning',type: SemanticEnum.warning,onTap: () => BottomSheets.showInfoSheet(context,title: "Warning Sheet",message: "This is a info bottom sheet.",buttonText: "Close",onTapDismiss: () => Navigator.pop(context),type: SemanticEnum.warning,),),SemanticButton(text: 'Danger',type: SemanticEnum.danger,onTap: () => BottomSheets.showInfoSheet(context,title: "Danger Sheet",message: "This is a info bottom sheet.",buttonText: "Close",onTapDismiss: () => Navigator.pop(context),type: SemanticEnum.danger,),),SemanticButton(text: 'Fatal',type: SemanticEnum.fatal,onTap: () => BottomSheets.showInfoSheet(context,title: "Fatal Sheet",message: "This is a info bottom sheet.",buttonText: "Close",onTapDismiss: () => Navigator.pop(context),type: SemanticEnum.fatal,),),],
),

在这里插入图片描述

3. 底部确认表单

底部确认弹窗是确认弹窗的底部版本。你可以使用或禁用图片,指定相关文本,以及按钮的回调等。

例如:

Row(mainAxisAlignment: MainAxisAlignment.spaceAround,children: [SemanticButton(text: 'Primary',type: SemanticEnum.primary,isOutlined: true,onTap: () => BottomSheets.showConfirmSheet(context,title: "Primary Sheet",message: "This is a confirm bottom sheet.",confirmButtonText: '确定',cancelButtonText: '取消',onTapConfirm: () {// 处理确认操作Navigator.pop(context);},onTapCancel: () {// 处理取消操作Navigator.pop(context);},type: SemanticEnum.primary,),),SemanticButton(text: 'Secondary',type: SemanticEnum.secondary,isOutlined: true,onTap: () => BottomSheets.showConfirmSheet(context,title: "Secondary Sheet",message: "This is a confirm bottom sheet.",confirmButtonText: '确定',cancelButtonText: '取消',onTapConfirm: () {// 处理确认操作Navigator.pop(context);},onTapCancel: () {// 处理取消操作Navigator.pop(context);},type: SemanticEnum.secondary,),),SemanticButton(text: 'Info',type: SemanticEnum.info,isOutlined: true,onTap: () => BottomSheets.showConfirmSheet(context,title: "Info Sheet",message: "This is a confirm bottom sheet.",confirmButtonText: '确定',cancelButtonText: '取消',onTapConfirm: () {// 处理确认操作Navigator.pop(context);},onTapCancel: () {// 处理取消操作Navigator.pop(context);},type: SemanticEnum.info,),),SemanticButton(text: 'Success',type: SemanticEnum.success,isOutlined: true,onTap: () => BottomSheets.showConfirmSheet(context,title: "Success Sheet",message: "This is a confirm bottom sheet.",confirmButtonText: '确定',cancelButtonText: '取消',onTapConfirm: () {// 处理确认操作Navigator.pop(context);},onTapCancel: () {// 处理取消操作Navigator.pop(context);},type: SemanticEnum.success,),),SemanticButton(text: 'Warning',type: SemanticEnum.warning,isOutlined: true,onTap: () => BottomSheets.showConfirmSheet(context,title: "Warning Sheet",message: "This is a confirm bottom sheet.",confirmButtonText: '确定',cancelButtonText: '取消',onTapConfirm: () {// 处理确认操作Navigator.pop(context);},onTapCancel: () {// 处理取消操作Navigator.pop(context);},type: SemanticEnum.warning,),),SemanticButton(text: 'Danger',type: SemanticEnum.danger,isOutlined: true,onTap: () => BottomSheets.showConfirmSheet(context,title: "Danger Sheet",message: "This is a confirm bottom sheet.",confirmButtonText: '确定',cancelButtonText: '取消',onTapConfirm: () {// 处理确认操作Navigator.pop(context);},onTapCancel: () {// 处理取消操作Navigator.pop(context);},type: SemanticEnum.danger,),),SemanticButton(text: 'Fatal',type: SemanticEnum.fatal,isOutlined: true,onTap: () => BottomSheets.showConfirmSheet(context,title: "Fatal Sheet",message: "This is a confirm bottom sheet.",confirmButtonText: '确定',cancelButtonText: '取消',onTapConfirm: () {// 处理确认操作Navigator.pop(context);},onTapCancel: () {// 处理取消操作Navigator.pop(context);},type: SemanticEnum.fatal,),),],
),

在这里插入图片描述

4. 底部级联选择器

4.1 底部级联选择器简介

底部级联选择器是一种在移动应用中常用的UI组件,主要用于在一个底部弹出的模态框中进行多级选择。用户可以通过滚动选择不同的选项,这些选项通常是分层次的,例如选择地址时的省、市、区。底部级联选择器适用于需要多级选择的场景,常见的应用包括:

  • 地址选择:用户可以依次选择省、市、区。

  • 分类选择:在电商平台中选择商品的类别。

  • 设置选项:例如设置日期和时间,先选择年份,再选择月份,最后选择日期。

底部级联选择器的主要特点包括:

  • 多级选择:支持多级数据的动态加载和显示。

  • 自定义样式:可以自定义按钮文本、样式等。

  • 灵活配置:支持配置是否可以点击背景关闭选择器,以及其他行为的自定义。

  • 响应式交互:选中项会即时反馈到UI上,提高用户体验。

4.2 示例:单级选择

SemanticButton(text: '一级选择表单',shrink: true,type: SemanticEnum.primary,isOutlined: true,onTap: () => BottomSheets.showCascadeSheet(context,items: [{'label': ''},{'label': '中国'},{'label': '俄罗斯'},{'label': '美国'},{'label': '法国'},{'label': '德国'},{'label': '意大利'},],).then((value) {debugPrint('value = $value');}),
)

在这里插入图片描述

4.3 示例:多级联动选择

SemanticButton(text: '多级联动选择表单',shrink: true,type: SemanticEnum.primary,isOutlined: true,onTap: () => BottomSheets.showCascadeSheet(context,items: [{'label': '中国','children': [{'label': '北京市','children': [{'label': '东城区','children': [{'label': '安定门街道'},{'label': '建国门街道'},{'label': '朝阳门街道'},],},{'label': '西城区','children': [{'label': '德胜门街道'},{'label': '新街口街道'},{'label': '月坛街道'},],},],},{'label': '上海市','children': [{'label': '黄浦区','children': [{'label': '南京东路街道'},{'label': '外滩街道'},{'label': '半淞园路街道'},],},{'label': '徐汇区','children': [{'label': '湖南路街道'},{'label': '斜土路街道'},{'label': '枫林路街道'},],},],},],},{'label': '美国','children': [{'label': '加利福尼亚州','children': [{'label': '旧金山市','children': [{'label': '唐人街'},{'label': '金融区'},{'label': '渔人码头'},],},{'label': '洛杉矶市','children': [{'label': '好莱坞'},{'label': '比佛利山'},{'label': '圣莫尼卡'},],},],},{'label': '纽约州','children': [{'label': '纽约市','children': [{'label': '曼哈顿'},{'label': '布鲁克林'},{'label': '皇后区'},],},{'label': '布法罗市','children': [{'label': '尼亚加拉广场'},{'label': '艾伦敦'},{'label': '拉萨尔公园'},],},],},],},],).then((value) {debugPrint('value = $value');}),
)

在这里插入图片描述

F. 报告问题和贡献代码

你可以在这个项目的 GitHub 上提供反馈或报告问题。如果你觉得这个库缺少某个功能,请创建一个功能请求。欢迎提交拉取请求。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/9016.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用HashMap实现,对一个字符集进行哈夫曼编码

最终达到的效果: 调用一个类 class HuffmanCodin{.....} 使用类中的静态方法&#xff0c;获取哈夫曼编码&#xff1a; 事前准备——哈夫曼树的节点定义 class Node implements Comparable<Node> {int weight;//权重Node left;Node right;char ch;//关键字&#xff0c…

单机轻松支持百万并发的go协程的简单tcpsocket服务端客户端通信小程序示例源码

单机轻松支持百万并发的go协程的简单tcpsocket服务端客户端通信小程序示例源码 服务端 server.go package mainimport ("bufio""fmt""io""net""os""strings""time" )// 简单的客户端服务端通信示例 /…

管理学SCI期刊,中科院4区,审稿快易录用,性价比超高!

一、期刊名称 Central European Journal of Operations Research 二、期刊简介概况 期刊类型&#xff1a;SCI 学科领域&#xff1a;管理学 影响因子&#xff1a;1.7 中科院分区&#xff1a;4区 出版方式&#xff1a;订阅模式/开放出版 版面费&#xff1a;选择开放出版需…

人大金仓报The connection attempt failed.Reason:Connection reset解决办法

在连接人大京仓数据库 的时候报下面的错误 解决办法&#xff1a; 更换这里的IP地址就行&#xff0c;不要用127.0.0.1&#xff0c;然后就可以了

24.c++异常(异常的抛出和捕获、异常的重新抛出、抛出异常对象、抛出派生类对象、异常规范)

1.C语言传统的处理错误的方式 传统的错误处理机制&#xff1a; 终止程序&#xff0c;如assert&#xff0c;缺陷&#xff1a;用户难以接受。如发生内存错误&#xff0c;除0错误时就会终止程序。返回错误码&#xff0c;缺陷&#xff1a;需要程序员自己去查找对应的错误。如系统…

qq空间:图片批量下载js脚本工具,javascript批量下载图片

qq空间&#xff1a;图片批量下载js脚本工具&#xff0c;javascript批量下载图片 QQ空间很多老照片想下载&#xff0c;但是腾讯没放开&#xff0c;只能一张张下载太麻烦。用前端js写了一个脚本支持批量下载。另外就是空间内的照片会被压缩&#xff0c;过几年再看&#xff0c;个…

vscode的git插件使用教程

虽然git的命令我没有滚瓜烂熟&#xff0c;但vscode的git插件是尊嘟很好用啊&#xff0c;都被我用烂了。在网上看见一个讲的很不错的插件教程。借鉴一下。并在一些地方用块引用进行了补充说明&#xff01; 跳过了vscode安装过程。 克隆GitHub中的存储库&#xff1a; 1、复制Gi…

Redmine 的主题 bs-redmine-theme-dark 完善

Redmine 的主题 bs-redmine-theme-dark 感觉还不错, 但是有部分样式看起来不是很舒服, 以下是一些调整: bs-redmine-theme-dark/stylesheets/application.css import url(../../../stylesheets/application.css); import url(style.css); import url(plugins.css); import url…

自然资源-重大建设项目前期的主要工作流程和重点关注事项

自然资源-重大建设项目前期的主要工作流程和重点关注事项 重大建设项目通常是指对国家、地区或组织具有重要战略意义&#xff0c;涉及大规模投资和长期发展的项目。这些项目往往对经济、社会和环境产生深远影响&#xff0c;通常涉及基础设施、科技、能源、交通、水利等领域。 …

解码器中DPB的作用是什么

在解码器中&#xff0c;DPB&#xff08;Decoded Picture Buffer&#xff0c;即解码图片缓存区&#xff09;的作用是存储解码过程中的参考帧。这些参考帧被用于运动补偿&#xff0c;这是预测编码中的关键步骤&#xff0c;可以显著提高视频压缩效率。 DPB确保了编码器和解码器在…

ai智能机器人电销的发展现状如何?

在移动互联网时代&#xff0c;人们对于营销的需求越来越高&#xff0c;而传统的营销方式已经无法满足人们的需求。下面我们来看看智能机器人电销的发展现状如何&#xff1f; 智能机器人电销作为一种全新的营销方式&#xff0c;正在迅速崛起。据市场机构统计&#xff0c;未来几…

C语言中的关键字static和extern

Hello,亲爱的小伙伴们&#xff0c;我又来了&#xff0c;上一期作者菌讲解了C语言中函数的知识点&#xff0c;得到了很好的反馈&#xff0c;这里作者菌感谢每一个至此我的小伙伴&#xff01;&#xff01;今天作者菌又来补充一些很有用的知识&#xff0c;感兴趣的uu们不要吝啬手中…

HTML学习|网页基本信息、网页基本标签、图像标签、超链接标签、列表标签、表格标签、媒体元素、页面结构分析、iframe内联框架

网页基本信息 DOCTYPE是设置使用什么规范&#xff0c;网页整个信息都在html标签中&#xff0c;head标签里包含字符集设置&#xff0c;网页介绍等信息&#xff0c;title标签是网页的名称&#xff0c;网页的主干都在body标签中 网页基本标签 标题标签 h1~h6都是标题标签&#x…

UE进阶篇四:多语言本地化

多语言 1、创建字符串表格&#xff1a;可以通过导入/导出CSV文件编辑或者编辑器直接编辑 2、工具 -> 本地化控制板 收集引擎中文本 3、添加新语言, 导出 .po文件&#xff0c;文本编辑也可直接编辑器编辑 4、使用方法 4.1 FText直接添加本地化 4.2 蓝图调用 4.3 C调用 5、…

鸿蒙开发-ArkTS语言-容器-非线性容器

鸿蒙开发-UI-web 鸿蒙开发-UI-web-页面 鸿蒙开发-ArkTS语言-基础类库 鸿蒙开发-ArkTS语言-并发 鸿蒙开发-ArkTS语言-并发-案例 鸿蒙开发-ArkTS语言-容器 文章目录 前言 一、非线性容器 1.HashMap 2.HashSet 3.TreeMap 4.TreeSet 5.LightWeightMap 6.LightWeightSet 7.P…

(一)Linux的vim编辑器的使用

一.vim编辑器 Vim 是从 vi 发展出来的一个文本编辑器。代码补全、编译及错误跳转等方便编程的功能特别丰富,在程序员中被广泛使用。简单的来说, vi 是老式的字处理器,不过功能已经很齐全了,但是还是有可以进步的地方。 vim 则可以说是程序开发者的一项很好用的工具。 二…

活动倒计时!四城再度联动,盘古信息与您相约上海|重庆|东莞|合肥

五月&#xff0c;是生命的复苏季&#xff0c;是希望的播种月。在这个充满活力的时节&#xff0c;盘古信息将在上海、重庆、东莞、合肥四地盛大举办四场精彩纷呈的活动。届时&#xff0c;我们将呈现一系列精心打造的工业软件产品及解决方案&#xff0c;带您领略制造业数字化转型…

设计模式概览说明

Java 中常见的设计模式有很多种。以下是其中一些主要的设计模式&#xff0c;共23种&#xff1a; 1、创建型模式&#xff08;Creational Patterns&#xff09;&#xff08;5种&#xff09; 工厂方法模式&#xff08;Factory Method Pattern&#xff09; 抽象工厂模式&#xff08…

深入入IAEA底层LinkedList

✅作者简介&#xff1a;大家好&#xff0c;我是再无B&#xff5e;U&#xff5e;G&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;再无B&#xff5e;U&#xff5e;G-CSDN博客 目标&#xff1a; 1.掌握LinkedList 2.…

ESG榜单冲击数据集(2000-2022年)

参照《财经研究》中刘柏&#xff08;2024&#xff09;的做法&#xff0c;以2015年为中点&#xff0c;根据商道荣绿2015年6月公开的ESG榜单数据&#xff0c;构建ESG榜单冲击的DID数据&#xff0c;如果公司属于ESG榜单冲击的公司&#xff0c;且年份≥2015&#xff0c;则为1&#…