当前位置: 首页 > 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…...

XCTF-web-easyupload

试了试php,php7,pht,phtml等,都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接,得到flag...

Go 语言接口详解

Go 语言接口详解 核心概念 接口定义 在 Go 语言中,接口是一种抽象类型,它定义了一组方法的集合: // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的: // 矩形结构体…...

Cinnamon修改面板小工具图标

Cinnamon开始菜单-CSDN博客 设置模块都是做好的,比GNOME简单得多! 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课,做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程,它的核心机制是 Goroutine 协程、Channel 通道,并基于CSP(Communicating Sequential Processes&#xff0…...

OpenLayers 分屏对比(地图联动)

注:当前使用的是 ol 5.3.0 版本,天地图使用的key请到天地图官网申请,并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能,和卷帘图层不一样的是,分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

大语言模型(LLM)中的KV缓存压缩与动态稀疏注意力机制设计

随着大语言模型(LLM)参数规模的增长,推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长,而KV缓存的内存消耗可能高达数十GB(例如Llama2-7B处理100K token时需50GB内存&a…...

HashMap中的put方法执行流程(流程图)

1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中,其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下: 初始判断与哈希计算: 首先,putVal 方法会检查当前的 table(也就…...

Django RBAC项目后端实战 - 03 DRF权限控制实现

项目背景 在上一篇文章中,我们完成了JWT认证系统的集成。本篇文章将实现基于Redis的RBAC权限控制系统,为系统提供细粒度的权限控制。 开发目标 实现基于Redis的权限缓存机制开发DRF权限控制类实现权限管理API配置权限白名单 前置配置 在开始开发权限…...

基于stm32F10x 系列微控制器的智能电子琴(附完整项目源码、详细接线及讲解视频)

注:文章末尾网盘链接中自取成品使用演示视频、项目源码、项目文档 所用硬件:STM32F103C8T6、无源蜂鸣器、44矩阵键盘、flash存储模块、OLED显示屏、RGB三色灯、面包板、杜邦线、usb转ttl串口 stm32f103c8t6 面包板 …...

react菜单,动态绑定点击事件,菜单分离出去单独的js文件,Ant框架

1、菜单文件treeTop.js // 顶部菜单 import { AppstoreOutlined, SettingOutlined } from ant-design/icons; // 定义菜单项数据 const treeTop [{label: Docker管理,key: 1,icon: <AppstoreOutlined />,url:"/docker/index"},{label: 权限管理,key: 2,icon:…...