Flutter笔记：Widgets Easier组件库（9）使用弹窗

Flutter笔记
Widgets Easier组件库（9）：使用弹窗
- 文章信息 - Author: 李俊才 (jcLee95)
Visit me at CSDN: https://jclee95.blog.csdn.net
My WebSite：http://thispage.tech/
Email: 291148484@163.com.
Shenzhen China
Address of this article:https://blog.csdn.net/qq_28550263/article/details/138342949
HuaWei:https://bbs.huaweicloud.com/blogs/426780

组件库地址：

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

【介绍】：本文介绍Flutter Widgets Easier组件库中的基本弹窗组件。

flutter-ljc

上一节：《 Widgets Easier组件库（8）使用图片 》 | 下一节：《 Widgets Easier组件库（10）快速处理承若型对话 》

目 录

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. 消息型弹窗

2.1 弹窗构成

消息弹窗（InfoDialog）通常用于在移动应用中显示重要信息，需要用户明确地关闭弹窗以确保信息被看到。以下是InfoDialog的主要构成元素：

  • 图标（可选）

  • 标题（Title）

  • 内容（Content）

  • 关闭按钮（Close Button）

## 2.2 使用语义

InfoDialogs是一种消息式的弹窗，这种弹窗只有一个按钮。你可以为InfoDialogs指定一个type属性，这将拥有语义性色彩。它的弹窗体看起来是这样的：

example_nc62R6kkem

例如：

Row(mainAxisAlignment: MainAxisAlignment.spaceAround,children: [SemanticButton(text: 'primary弹窗',type: SemanticEnum.primary,isOutlined: true,onTap: () => InfoDialogs.show(context,title: "你好啊！",message: "这是一个primary消息弹窗",buttonText: "我知道了",onTapDismiss: () {Navigator.of(context).pop();},type: SemanticEnum.primary,),),const Gap(10),SemanticButton(text: 'secondary弹窗',type: SemanticEnum.secondary,isOutlined: true,onTap: () => InfoDialogs.show(context,title: "你好啊！",message: "这是一个secondary消息弹窗",buttonText: "我知道了",onTapDismiss: () {Navigator.of(context).pop();},type: SemanticEnum.secondary,),),const Gap(10),SemanticButton(text: 'info弹窗',type: SemanticEnum.info,isOutlined: true,onTap: () => InfoDialogs.show(context,title: "你好啊！",message: "这是一个info消息弹窗",buttonText: "我知道了",onTapDismiss: () {Navigator.of(context).pop();},type: SemanticEnum.info,),),const Gap(10),SemanticButton(text: 'success弹窗',type: SemanticEnum.success,isOutlined: true,onTap: () => InfoDialogs.show(context,title: "你好啊！",message: "这是一个success消息弹窗",buttonText: "我知道了",onTapDismiss: () {Navigator.of(context).pop();},type: SemanticEnum.success,),),const Gap(10),SemanticButton(text: 'warning弹窗',type: SemanticEnum.warning,isOutlined: true,onTap: () => InfoDialogs.show(context,title: "你好啊！",message: "这是一个warning消息弹窗",buttonText: "我知道了",onTapDismiss: () {Navigator.of(context).pop();},type: SemanticEnum.warning,),),const Gap(10),SemanticButton(text: 'danger弹窗',type: SemanticEnum.danger,isOutlined: true,onTap: () => InfoDialogs.show(context,title: "你好啊！",message: "这是一个danger消息弹窗",buttonText: "我知道了",onTapDismiss: () {Navigator.of(context).pop();},type: SemanticEnum.danger,),),const Gap(10),SemanticButton(text: 'fatal弹窗',type: SemanticEnum.fatal,isOutlined: true,onTap: () => InfoDialogs.show(context,title: "你好啊！",message: "这是一个fatal消息弹窗",buttonText: "我知道了",onTapDismiss: () {Navigator.of(context).pop();},type: SemanticEnum.fatal,),),],
)

example_0YDNxnPzok

## 2.3 zoomIn动画

InfoDialogs.show是没有动画效果的。你可以直接使用InfoDialogs.zoomIn方法，这将有一个缩放效果的弹窗动画。InfoDialogs.zoomIn方法和InfoDialogs.show具体完全一样的参数。例如：

SemanticButton(text: 'zoomIn动画',shrink: true,onTap: () => InfoDialogs.zoomIn(context,title: "你好啊！",message: "这是一个fatal消息弹窗",buttonText: "我知道了",onTapDismiss: () {Navigator.of(context).pop();},),
)

其效果如下：

example_QCpD0oPAWg

## 2.4 自定义动画

你还可以通过在InfoDialogs.showInfoDialog方法中指定transitionBuilder参数来自定义弹窗动画效果，例如：

SemanticButton(text: '自定义动画',shrink: true,onTap: () => InfoDialogs.showInfoDialog(context,title: "你好啊！",message: "这是一个消息弹窗",buttonText: "我知道了",transitionBuilder:(context, animation, secondaryAnimation, child) {return AnimateStyles.backInDown(animation, child);},onTapDismiss: () {Navigator.of(context).pop();},),
)

注：这里使用的AnimateStyles.backInDown动画需要单独安装：

flutter pub add flutter_easy_animations

其效果如下：

example_CYfwe0SU6B

3. 确认型弹窗

3.1 弹窗构成

确认型弹窗（Confirmation Dialog）用于在执行某些可能具有重大影响的操作前，要求用户确认其决定。这种弹窗通常包含以下元素：

  • 图标（可选）；

  • 标题：简洁明了地描述所需确认的操作;

  • 内容：提供操作的详细信息，帮助用户做出决策;

  • 操作按钮：通常是“确认”和“取消”，有时可能包括其他选项，如“保存”，“不保存”等;

其消息窗体看起来是这样的：

example_AR1n3S0R9d

3.2 使用语义

你可以为ConfirmDialogs指定一个type属性，这将拥有语义性色彩。它的弹窗体看起来是这样的：

例如：

Row(mainAxisAlignment: MainAxisAlignment.spaceAround,children: [SemanticButton(text: 'primary弹窗',type: SemanticEnum.primary,onTap: () => ConfirmDialogs.show(context,title: "你确定吗",message: "这个是primary确认弹窗",confirmButtonText: "确定",cancelButtonText: "真的确定",onTapCancel: () {Navigator.of(context).pop();},onTapConfirm: () {Navigator.of(context).pop();},type: SemanticEnum.primary,),),const Gap(10),SemanticButton(text: 'secondary弹窗',type: SemanticEnum.secondary,onTap: () => ConfirmDialogs.show(context,title: "你确定吗",message: "这个是secondary确认弹窗",confirmButtonText: "确定",cancelButtonText: "真的确定",onTapCancel: () {Navigator.of(context).pop();},onTapConfirm: () {Navigator.of(context).pop();},type: SemanticEnum.secondary,),),const Gap(10),SemanticButton(text: 'info弹窗',type: SemanticEnum.info,onTap: () => ConfirmDialogs.show(context,title: "你确定吗",message: "这个是info确认弹窗",confirmButtonText: "确定",cancelButtonText: "真的确定",onTapCancel: () {Navigator.of(context).pop();},onTapConfirm: () {Navigator.of(context).pop();},type: SemanticEnum.info,),),const Gap(10),SemanticButton(text: 'success弹窗',type: SemanticEnum.success,onTap: () => ConfirmDialogs.show(context,title: "你确定吗",message: "这个是success确认弹窗",confirmButtonText: "确定",cancelButtonText: "真的确定",onTapCancel: () {Navigator.of(context).pop();},onTapConfirm: () {Navigator.of(context).pop();},type: SemanticEnum.success,),),const Gap(10),SemanticButton(text: 'warning弹窗',type: SemanticEnum.warning,onTap: () => ConfirmDialogs.show(context,title: "你确定吗",message: "这个是warning确认弹窗",confirmButtonText: "确定",cancelButtonText: "真的确定",onTapCancel: () {Navigator.of(context).pop();},onTapConfirm: () {Navigator.of(context).pop();},type: SemanticEnum.warning,),),const Gap(10),SemanticButton(text: 'danger弹窗',type: SemanticEnum.danger,onTap: () => ConfirmDialogs.show(context,title: "你确定吗",message: "这个是danger确认弹窗",confirmButtonText: "确定",cancelButtonText: "真的确定",onTapCancel: () {Navigator.of(context).pop();},onTapConfirm: () {Navigator.of(context).pop();},type: SemanticEnum.danger,),),const Gap(10),SemanticButton(text: 'fatal弹窗',type: SemanticEnum.fatal,onTap: () => ConfirmDialogs.show(context,title: "你确定吗",message: "这个是fatal确认弹窗",confirmButtonText: "确定",cancelButtonText: "真的确定",onTapCancel: () {Navigator.of(context).pop();},onTapConfirm: () {Navigator.of(context).pop();},type: SemanticEnum.fatal,),),],
)

3.2 zoomIn动画

ConfirmDialogs.show是没有动画效果的。你可以直接使用ConfirmDialogs.zoomIn方法，这将有一个缩放效果的弹窗动画。ConfirmDialogs.zoomIn方法和ConfirmDialogs.show具体完全一样的参数。例如：

SemanticButton(text: 'zoomIn动画',shrink: true,onTap: () => ConfirmDialogs.zoomIn(context,title: "你确定吗",message: "这个是确认弹窗",confirmButtonText: "确定",cancelButtonText: "真的确定",onTapCancel: () {Navigator.of(context).pop();},onTapConfirm: () {Navigator.of(context).pop();},),
)

其效果如下：

example_UqL2qrRpiO

3.3 自定义动画

你还可以通过在ConfirmDialogs.showInfoDialog方法中指定transitionBuilder参数来自定义弹窗动画效果，例如：

SemanticButton(text: 'flipInX动画',shrink: true,onTap: () => ConfirmDialogs.showConfirmDialog(context,transitionBuilder:(context, animation, secondaryAnimation, child) {return AnimateStyles.flipInX(animation, child);},title: "你确定吗",message: "这个是确认弹窗",confirmButtonText: "确定",cancelButtonText: "真的确定",onTapCancel: () {Navigator.of(context).pop();},onTapConfirm: () {Navigator.of(context).pop();},),
)

注：这里使用的AnimateStyles.flipInX动画需要单独安装：

flutter pub add flutter_easy_animations

其效果如下：

example_EGAUPCK3VF

4. Windows风格弹窗

4.1 基本用法

WinDialogs是一种模仿Windows风格的弹窗。下面的示例展示了调用一个Windoiws风格的弹窗:

SemanticButton(text: '显示Windows风格弹窗',isOutlined: true,shrink: true,radius: 2,color: Colors.black,onTap: () => WinDialogs.show(context,title: 'title',icon: const Icon(Icons.run_circle_outlined),text: '在这个世界上，我们每个人都应该深刻理解，生活中，若能够不断地反思和自省，那么我们就能更好地理解生活的真谛。',contents: Row(children: [const Text('打开(O):'),const Gap(10),Expanded(child: Container(height: 25,decoration: BoxDecoration(border: Border.all(color: Colors.grey,width: 1,),borderRadius: BorderRadius.circular(2),),),),],),actions: [SemanticButton(text: '确定',width: 90,isOutlined: true,radius: 2,color: Colors.black,onTap: () {},),const Gap(10),SemanticButton(text: '取消',width: 90,isOutlined: true,radius: 2,color: Colors.black,onTap: () {},),const Gap(10),SemanticButton(text: '浏览',width: 90,isOutlined: true,radius: 2,color: Colors.black,onTap: () {},),],),
),

效果如图所示：

example_Z45EJiFtKU

4.2 zoomIn动画

与之前的弹窗一样，你可以使用zoomIn方法来设置一个从小到大的弹窗动画效果，该方法用于与show方法一样的参数：

example_BTEipOt7f9

4.3 自定义动画

如果你打算自定义弹窗动画，这也是和之前的弹窗一样的。你可以使用showWinDialog，并通过transitionBuilder参数指定一个动画。例如：

SemanticButton(text: '使用bounceIn动画',isOutlined: true,shrink: true,radius: 2,color: Colors.black,onTap: () => WinDialogs.showWinDialog(context,transitionBuilder:(context, animation, secondaryAnimation, child) {return AnimateStyles.bounceIn(animation, child);},title: 'title',icon: const Icon(Icons.run_circle_outlined),text: '在这个世界上，我们每个人都应该深刻理解，生活中，若能够不断地反思和自省，那么我们就能更好地理解生活的真谛。',contents: Row(children: [const Text('打开(O):'),const Gap(10),Expanded(child: Container(height: 25,decoration: BoxDecoration(border: Border.all(color: Colors.grey,width: 1,),borderRadius: BorderRadius.circular(2),),),),],),actions: [SemanticButton(text: '确定',width: 90,isOutlined: true,radius: 2,color: Colors.black,onTap: () {},),const Gap(10),SemanticButton(text: '取消',width: 90,isOutlined: true,radius: 2,color: Colors.black,onTap: () {},),const Gap(10),SemanticButton(text: '浏览',width: 90,isOutlined: true,radius: 2,color: Colors.black,onTap: () {},),],

其效果如下：

example_XXgNIBMhxU

注：这里使用的AnimateStyles.rollIn动画需要单独安装：

flutter pub add flutter_easy_animations

F. 报告问题和贡献代码

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

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

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

相关文章

每日OJ题_贪心算法三②_力扣553. 最优除法

每日OJ题_贪心算法三②_力扣553. 最优除法

目录 力扣553. 最优除法 解析代码 力扣553. 最优除法 553. 最优除法 难度 中等 给定一正整数数组 nums，nums 中的相邻整数将进行浮点除法。例如， [2,3,4] -> 2 / 3 / 4 。 例如，nums [2,3,4]，我们将求表达式的值 "…
阅读更多...
MySQL-笔记-08.数据库编程

MySQL-笔记-08.数据库编程

目录 8.1 编程基础 8.1.1 基本语法 8.1.2 运算符与表达式 1. 标识符 2. 常量 （1） 字符串常量 （2）日期时间常量 （3）数值常量 （4）布尔值常量 （5）NULL…
阅读更多...
暖心又实用！母亲节教会妈妈这4招才是最贴心的礼物

暖心又实用！母亲节教会妈妈这4招才是最贴心的礼物

母亲节就要到了，这个特殊的日子，我们总是想要为妈妈送上最真挚的祝福和关怀。在这个数字化时代，一部智能手机就能成为我们表达爱意的桥梁。今天，就让我们一起来看看华为手机的四个功能，让妈妈的手机使用体验更加便捷、…
阅读更多...
革新食品改良，解锁品质新高度——体验西奥机电TEX-01质构仪的卓越魅力

革新食品改良，解锁品质新高度——体验西奥机电TEX-01质构仪的卓越魅力

革新食品改良，解锁品质新高度——体验西奥机电TEX-01质构仪的卓越魅力 引领食品改良新潮流 在追求品质生活的今天，食品的口感和品质成为了消费者选择的重要标准。为了满足这一市场需求，食品企业正积极寻求新的改良方法，以提升产…
阅读更多...
Study--Oracle-01-单实例部署Oracle11G-R2

Study--Oracle-01-单实例部署Oracle11G-R2

Oracle版本发布介绍 Oracle 19c和12c和11g功能区别_数据库_oracle_支持 一、CentOS 7 环境准备 1、软件准备 操作系统：CentOS 7 数据库版本: Oracle11g R2 2、操作系统环境配置 关闭selinux ，编辑 /etc/selinux/config文件，设置SELINU…
阅读更多...
栈的磁盘优化：降低存取成本的算法与实现

栈的磁盘优化：降低存取成本的算法与实现

栈的磁盘优化：降低存取成本的算法与实现 问题背景简单实现方法的分析实现方法PUSH操作POP操作成本分析渐近分析 优化实现方法实现方法成本分析渐近分析 进一步优化：双页管理策略实现方法管理策略成本分析 伪代码示例C代码示例结论 问题背景 在具有有限快…
阅读更多...
Photoshop中选区工具的应用

Photoshop中选区工具的应用

Photoshop中选区工具的应用 前言Photoshop中选区工具的基本操作创建选区的工具及方法选择、取消、隐藏选区选区的增加、减少选区的应用变换扩大选取与选取相似 Photoshop中采用快速选择工具来创建选区Photoshop中采用色彩范围命令来创建选区Photoshop中采用快速蒙版来创建选区P…
阅读更多...
如何用Kimi，5秒1步生成流程图

如何用Kimi，5秒1步生成流程图

引言 在当前快节奏的工作环境中，拥有快速、专业且高效的工具不可或缺。 Kimi不仅能在5秒内生成专业的流程图（kimi），还允许实时编辑和预览，大幅简化了传统流程图的制作过程。 这种迅速的生成能力和高度的可定制性使得…
阅读更多...
docker资源限额

docker资源限额

多数的应⽤场景要对Docker容器的运⾏内存进⾏限制，防⽌其使⽤过多的内存。 格式：-m或--memory 正常的内存大小 [rootadmin ~]# docker ps -a CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS …
阅读更多...
音视频开发4 FFmpeg windows 环境搭建，QT 安装，动态库的搜索路径

音视频开发4 FFmpeg windows 环境搭建，QT 安装，动态库的搜索路径

FFmpeg 为了让所有平台的开发者都能够学习到音视频开发的通用技术，本教程主要讲解跨平台的音视频开发库FFmpeg。其实只要你掌握了FFmpeg，也可以很快上手其他音视频开发库，因为底层原理都是一样的，你最终操作的都是一样的数据&…
阅读更多...
速卖通新卖家测评攻略：从入门到精通

速卖通新卖家测评攻略：从入门到精通

在电商行业中，测评被广泛认为是提升产品转化率和销量的有效手段。对于速卖通的卖家而言，测评的必要性更是显而易见。测评，本质上与国内电商的补单行为相似，是一种通过增加销量来提升产品权重的方法。 特别是在竞争激烈的类目中&a…
阅读更多...
【Stream 流】通过一个例子看遍所有Stream API使用场景

【Stream 流】通过一个例子看遍所有Stream API使用场景

前言 上篇文章记录了方法引用，Lambda表达式等基础的知识点，这篇文章主要结合课设项目详细介绍Stream 流的API以及它的主要场景。 Stream API作用 在Java 8及其以后的版本中，Stream API为处理集合数据提供了强大而灵活的功能。有了Stream AP…
阅读更多...
Flutter开发Dart中的队列（Queue）

Flutter开发Dart中的队列（Queue）

文章目录 Dart中的队列（Queue）基本操作示例队列的类型队列的应用总结 Dart中的队列（Queue） 队列是一种抽象的数据结构，遵循“先进先出”（FIFO）的原则。这意味着最早添加的元素将首先被移除。队…
阅读更多...
如何在速卖通（aliexpress）买东西？速卖通（aliexpress）买东西怎么付款？

如何在速卖通（aliexpress）买东西？速卖通（aliexpress）买东西怎么付款？

如何在速卖通购物： 1、注册账户：首先访问速卖通官网或下载速卖通手机应用程序，并注册一个账户。如果您已经有一个账户，直接登录即可。 2、搜索商品：在搜索框中输入您想要购买的商品关键词，然后点击搜索。…
阅读更多...
Ansible 自动化运维工具 - 了解和模块应用

Ansible 自动化运维工具 - 了解和模块应用

目录 一. Ansible 的相关知识 1.1 Ansible 工具的简介 1.2 Ansible的四大组件 1.3 运维自动化工具 1.4 Ansible 和其它自动化运维工具对比 1.5 Ansible 的优缺点 二. Ansible 环境安装部署 2.1 管理端安装 ansible 2.2 配置主机清单 三. ansible 命令行模块 3.1 comm…
阅读更多...
ue引擎游戏开发笔记（33）——武器与角色的匹配，将新武器装备到角色身上

ue引擎游戏开发笔记（33）——武器与角色的匹配，将新武器装备到角色身上

1.需求分析： 武器能出现在世界中，完成了第一步，下一步需要角色和武器适配，即不论角色跑动，射击等，武器和角色都相匹配，将武器装备到角色身上。 2.操作实现： 1.首先先把角色原有的武…
阅读更多...
HAL PWM 配置 占空比 频率 stm32 学习笔记

HAL PWM 配置 占空比 频率 stm32 学习笔记

title: HALPWM配置占空比频率 tags: STM32ClionHal 1.STM32CubeMX学习笔记（13）——PWM输出(呼吸灯)使用 2.STM32标准库HAL库 | 高精度动态调节PWM输出频率占空比 看你cubemx 里面的配置时钟频率是多少 参照第二篇文章描述修改 下面俩个参数就行 uin…
阅读更多...
stateflow绝对时间逻辑实操

stateflow绝对时间逻辑实操

使用after运算符替换at运算符 如果将at运算符与绝对时间-时间逻辑一起使用，则在尝试模拟模型时会出现错误消息。请改用after运算符。 假设您想使用（5.33，秒）的转换来定义时间延迟。 将转换更改为after（5.33秒），如图所示。这样就不报错了。 使用带有后运算符的外部自循…
阅读更多...
AIGC (AI-Generated Content) 技术深度探索：现状、挑战与未来愿景

AIGC (AI-Generated Content) 技术深度探索：现状、挑战与未来愿景

🔥 个人主页：空白诗 文章目录 🤖 AIGC技术：塑造未来的创意与内容革命 🌟引言 🚀AIGC技术发展现状 📈核心技术驱动 💡应用领域拓展 🌐 面临的挑战 ❌真实性与伦理考量 &am…
阅读更多...
Redis教程——主从复制

Redis教程——主从复制

在上篇文章我们学习了Redis教程——管道，这篇文章学习Redis教程——主从复制。 主从复制 为了数据更加安全可靠，在实际的项目中，肯定是有多个Redis服务，主机Redis以写为主，从机Redis以读为主，当主机Redis…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023