当前位置: 首页 > news >正文

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 上提供反馈或报告问题。如果你觉得这个库缺少某个功能,请创建一个功能请求。欢迎提交拉取请求。

相关文章:

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

Flutter笔记 Widgets Easier组件库(13)使用底部弹窗 - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite:http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress of this …...

RobbitMQ基本消息队列的消息发送过程

RabbitMQ: One broker to queue them all | RabbitMQ RabbitMQ官网 SpringAmqp的官方地址:Spring AMQP 代码示例:对着代码看应该能看明白 publisher:消息发送者的代码示例 package cn.itcast.mq.helloworld;import com.rabbitmq.client.Channel; import com.rabb…...

MongoDB聚合运算符:$topN

MongoDB聚合运算符:$topN 文章目录 MongoDB聚合运算符:$topN语法用法关于null和缺失值的处理BSON数据类型排序 举例查找三个得分最高的查找全部游戏中三个最高的得分基于分组key来计算参数n $topN聚合运算符返回分组中指定顺序的最前面 n个元素&#xf…...

什么是顶级域名、二级域名、三级域名?

什么是顶级域名、二级域名、三级域名? 一般域名都由两部分组成,中间用“.”隔开,一个域名是几级域名,简单的可以通过数“.”的方式来判断。 如baidu.com,它是由baidu和后缀“.com”组成,我们可以认定它是顶…...

[Android]四大组件简介

在 Android 开发中,“四大组件”(Four Major Components)是指构成 Android 应用程序的四种核心组件,它们通过各自的方式与系统交互,实现应用的多样功能。这些组件是:Activity、Service、Broadcast Receiver…...

一次完整的GC流程

Java堆中内存区分 Java的堆由新生代(Young Generation)和老年代(Old Generation)组成。新生代存放新分配的对象,老年代存放长期存在的对象。 新生代(Young)由年轻区(Eden&a…...

GAME101-Lecture06学习

前言 上节课主要讲的是三角形的光栅化。重要的思想是要利用像素的中心对三角形可见性的函数进行采样。 这节课主要就是反走样。 课程链接:Lecture 06 Rasterization 2 (Antialiasing and Z-Buffering)_哔哩哔哩_bilibili 反走样引入 ​ 通过采样,得到…...

202203青少年软件编程(Python)等级考试试卷(二级)

第 1 题 【单选题】 关于Python中的列表,下列描述错误的是?( ) A :列表是Python中内置可变序列,是若干元素的有序集合; B :列表中的每一个数据称为“元素”; C :在Python中,一个列表中的数据类型可以各不相同; D :可以使用s[1]来获取列表s的第一个元素。 正确答案…...

带有-i选项的sed命令在Linux上执行成功,但在MacOS上失败了

问题: 我已经成功地使用以下 sed 命令在Linux中搜索/替换文本: sed -i s/old_string/new_string/g /path/to/file然而,当我在Mac OS X上尝试时,我得到: command i expects \ followed by text我以为我的Mac运行的是…...

[Linux_IMX6ULL驱动开发]-GPIO子系统和Pinctrl子系统

目录 Pinctrl子系统的概念 GPIO子系统的概念 定义自己的GPIO节点 GPIO子系统的函数 引脚号的确定 基于GPIO子系统的驱动程序 驱动程序 设备树修改 之前我们进行驱动开发的时候,对于硬件的操作是依赖于ioremap对寄存器的物理地址进行映射,以此来达…...

Elasticsearch:理解人工智能相似性搜索

理解相似性搜索(也称为语义搜索)的指南,这是人工智能最新阶段的关键发现之一。 最新阶段人工智能的关键发现之一是根据相似性搜索和查找文档的能力。相似性搜索是一种比较信息的方法,其基于含义而非关键字。 相似性搜索也被称为语…...

Mac YOLO V9推理测试(基于ultralytics)

环境: Mac M1 (MacOS Sonoma 14.3.1) Python 3.11PyTorch 2.1.2 一、准备工作 使用YOLO一般都会接触ultralytics这个框架,今天来试试用该框架进行YOLO V9模型的推理。 YOLOv9目前提供了四种模型下载:yolov9-c.pt、yolov9-e.pt、gelan-c.p…...

OuterClass.this cannot be referenced from a static context

目标,定义了一个内部类,然后把这个内部类设置为单例 一 使用非静态内部类 public class OuterClass {public class InnerClass {} } 直接定义单例: .OuterClass.this cannot be referenced from a static context public class OuterClass …...

CAP与BASE分布式理论

一、分布式理论 1.CAP理论 CAP理论是说对于分布式数据存储,最多只能同时满足一致性(C,Consistency)、可用性(A, Availability)、分区容忍性(P,Partition Tolerance&…...

JavaScript性能优化策略

JavaScript性能优化策略可以分为以下几个方面: 减少内存使用:避免创建不必要的对象和数组,使用对象池或数组缓存来重复利用已有的对象和数组。此外,及时释放不再需要的对象和数组,避免内存泄漏。 减少重绘和回流&…...

curl访问流式非流式大模型openai api接口

参考:https://platform.openai.com/docs/api-reference/making-requests 命令行访问: 直接是vllm的openai api接口 curl http://192.168.***:10860/v1/chat/completions -H "Content-Type: application/json" -H "Authorization: EMPTY" -d {"mod…...

Go 使用 MongoDB

MongoDB 安装(Docker)安装 MongoDB Go 驱动使用 Go Driver 连接到 MongoDB在 Go 里面使用 BSON 对象CRUD 操作 插入文档更新文档查询文档删除文档 下一步 MongoDB 安装(Docker) 先装个 mongo,为了省事就用 docker 了。 docker 的 daemon.json 加一个国内的源地址…...

什么是g++-arm-linux-gnueabihf

2024年5月3日,周五晚上 g-arm-linux-gnueabihf 是针对 ARM 架构(ARMv7 和 ARMv8)的 Linux 系统开发的 GNU C 编译器套件,可以在 x86 或 x86_64 架构的主机上使用,用于交叉编译 ARM Linux 应用程序和库。 与 gcc-arm-l…...

Unity延时触发的几种常规方法

目录 1、使用协程Coroutine2、使用Invoke、InvokeRepeating函数3、使用Time.time4、使用Time.deltaTime5、使用DOTween。6、使用Vision Timer。 1、使用协程Coroutine public class Test : MonoBehaviour {// Start is called before the first frame updatevoid Start(){ …...

CSS文字描边,文字间隔,div自定义形状切割

clip-path: polygon( 0 0, 68% 0, 100% 32%, 100% 100%, 0 100% );//这里切割出来是少一角的正方形 letter-spacing: 1vw; //文字间隔 -webkit-text-stroke: 1px #fff; //文字描边1px uniapp微信小程序顶部导航栏设置透明,下拉改变透明度 onP…...

python打卡day49

知识点回顾: 通道注意力模块复习空间注意力模块CBAM的定义 作业:尝试对今天的模型检查参数数目,并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

工业安全零事故的智能守护者:一体化AI智能安防平台

前言: 通过AI视觉技术,为船厂提供全面的安全监控解决方案,涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面,能够实现对应负责人反馈机制,并最终实现数据的统计报表。提升船厂…...

通过Wrangler CLI在worker中创建数据库和表

官方使用文档:Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后,会在本地和远程创建数据库: npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库: 现在,您的Cloudfla…...

2025盘古石杯决赛【手机取证】

前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来,实在找不到,希望有大佬教一下我。 还有就会议时间,我感觉不是图片时间,因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展,光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域,IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选,但在长期运行中,例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

大数据学习(132)-HIve数据分析

​​​​🍋🍋大数据学习🍋🍋 🔥系列专栏: 👑哲学语录: 用力所能及,改变世界。 💖如果觉得博主的文章还不错的话,请点赞👍收藏⭐️留言&#x1f4…...

C++:多态机制详解

目录 一. 多态的概念 1.静态多态(编译时多态) 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1).协变 2).析构函数的重写 5.override 和 final关键字 1&#…...

前端开发者常用网站

Can I use网站:一个查询网页技术兼容性的网站 一个查询网页技术兼容性的网站Can I use:Can I use... Support tables for HTML5, CSS3, etc (查询浏览器对HTML5的支持情况) 权威网站:MDN JavaScript权威网站:JavaScript | MDN...

前端调试HTTP状态码

1xx(信息类状态码) 这类状态码表示临时响应,需要客户端继续处理请求。 100 Continue 服务器已收到请求的初始部分,客户端应继续发送剩余部分。 2xx(成功类状态码) 表示请求已成功被服务器接收、理解并处…...

Python的__call__ 方法

在 Python 中,__call__ 是一个特殊的魔术方法(magic method),它允许一个类的实例像函数一样被调用。当你在一个对象后面加上 () 并执行时(例如 obj()),Python 会自动调用该对象的 __call__ 方法…...