Flutter笔记:Widgets Easier组件库(12)使用消息吐丝(Notify Toasts)

Flutter笔记
Widgets Easier组件库(12)使用消息吐丝(Notify Toasts)

- 文章信息 - 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/138425637
HuaWei:https://bbs.huaweicloud.com/blogs/426808

组件库地址

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

【介绍】:本文介绍Flutter的Widgets Easier组件库中:消息吐丝(Notify Toasts)的使用方法。

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


上一节:《 Widgets Easier组件库(11)- 使用消息提示 | 下一节:《 Widgets Easier组件库(13)- 使用底部弹窗


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. 基本用法

消息吐丝组件受到Element-Plus的Notification启发,并以一种适合于在Flutter上使用的方式进行封装。它提供了一种简单而灵活的方式来在你的应用中显示消息通知。通过自定义样式、动画效果和交互,你可以创建出符合应用设计风格的消息通知。

消息吐丝相关组件是通过 NotifyToasts 类提供的静态方法来掉用显示的。 NotifyToasts 类中有四个静态方法,对应于显示消息通知的四个方位:

  1. showTopLeft:在屏幕左上角显示消息通知;
  2. showTopRight:在屏幕右上角显示消息通知;
  3. showBottomLeft:在屏幕左下角显示消息通知;
  4. showBottomRight:在屏幕右下角显示消息通知。

例如:

Row(mainAxisAlignment: MainAxisAlignment.spaceAround,children: [SemanticButton(onTap: () => NotifyToasts.showTopRight(context,title: 'TopRight',message: 'Top Right Notification!',),isOutlined: true,text: 'Top Right',),SemanticButton(onTap: () => NotifyToasts.showTopLeft(context,title: 'TopLeft',message: 'Top Left Notification!',),isOutlined: true,text: 'Top Left',),SemanticButton(onTap: () => NotifyToasts.showBottomRight(context,title: 'BottomRight',message: 'Bottom Right Notification!',),isOutlined: true,text: 'Bottom Right',),SemanticButton(onTap: () => NotifyToasts.showBottomLeft(context,duration: const Duration(seconds: 1),title: 'BottomLeft',message: 'Bottom Left Notification!',),isOutlined: true,text: 'Bottom Left',),],
),

代码的运行效果如下:

example_qCE7P4gOkP

一条消息吐丝的默认时间为3s,你可以通过duration参数指定其时间。上面的示例中,Bottom Left 的被手动设置为1秒。

3. 语义类型

NotifyToasts的四个静态方法中都有一个type属性,它是一个SemanticEnum枚举。你可以通过指定SemanticEnum的值来设置不同的语义类型。例如:

Row(mainAxisAlignment: MainAxisAlignment.spaceAround,children: [SemanticButton(type: SemanticEnum.primary,onTap: () => NotifyToasts.showTopRight(context,type: SemanticEnum.primary,message: 'Here are some messages.',),isOutlined: true,text: 'Primary',),SemanticButton(type: SemanticEnum.secondary,onTap: () => NotifyToasts.showTopRight(context,type: SemanticEnum.secondary,message: 'Here are some messages.',),isOutlined: true,text: 'Secondary',),SemanticButton(type: SemanticEnum.info,onTap: () => NotifyToasts.showTopRight(context,type: SemanticEnum.info,message: 'Here are some messages.',),isOutlined: true,text: 'Info',),SemanticButton(type: SemanticEnum.success,onTap: () => NotifyToasts.showTopRight(context,type: SemanticEnum.success,message: 'Here are some messages.',),isOutlined: true,text: 'Success',),SemanticButton(type: SemanticEnum.warning,onTap: () => NotifyToasts.showTopRight(context,type: SemanticEnum.warning,message: 'Here are some messages.',),isOutlined: true,text: 'Warning',),SemanticButton(type: SemanticEnum.danger,onTap: () => NotifyToasts.showTopRight(context,type: SemanticEnum.danger,message: 'Here are some messages.',),isOutlined: true,text: 'Danger',),SemanticButton(type: SemanticEnum.fatal,onTap: () => NotifyToasts.showTopRight(context,type: SemanticEnum.fatal,message: 'Here are some messages.',),isOutlined: true,text: 'Fatal',),],
)

代码的运行效果如下:

example_5MJrSKGAUZ

需要指出的是,消息吐丝中的type不会默认为SemanticEnum.primary,如果没有指定,则不使用语义色彩。

4. 自定义图片和标题

如果指定了非空的type值,你可以不必指定图标和标题,因为有默认的图标和标题。当然如果你需要自己指定也是可以的,例如:

SemanticButton(shrink: true,prefixIcon: const Icon(Icons.access_alarms,color: Color.fromARGB(255, 125, 8, 0),),type: SemanticEnum.danger,onTap: () => NotifyToasts.showTopRight(context,title: 'Alarm',icon: const Icon(Icons.access_alarms,color: Color.fromARGB(255, 125, 8, 0),),type: SemanticEnum.danger,message: 'Here are some messages.',),isOutlined: true,text: 'Alarm',
)

代码的运行效果如下:

example_N97sCnevj3

这个例子中,自定义了一个“Alarm”消息通知。通过title属性指定标题文本为Alarm;通过icon属性指定了一个Alarm图标。可以看到,即使我们指定了type,自定义的标题也会覆盖掉对应于type的默认标题。

另外需要指出的是,这里的图标未必是一个Icon类型,可以是任意的Widget。这使得开发者又更大的使用灵活性,比如使用一张图片:

SemanticButton(shrink: true,onTap: () => NotifyToasts.showTopRight(context,title: 'Jack Lee',icon: Picture(source: 'assets/jclee95.png'),message: 'JackLee, the author of this library, is a good boy.',),isOutlined: true,text: 'Jack Lee',
)

代码的运行效果如下:

example_0VkrqwD0V6

5. 自定义颜色

你可以自己定义通知消息的颜色。例如:

SemanticButton(shrink: true,color: Colors.amber,onTap: () => NotifyToasts.showTopRight(context,color: Colors.amber,title: 'Custom color',message: 'The currently defined color is Colors.amber.',),isOutlined: true,text: 'Custom color',
)

代码的运行效果如下:

example_v5UtPLQkCx

6. 自定义动画

你可以自定义动画,不过这里还是和以前一样推荐使用Widgets Easier 组件库配套的flutter_easy_animations库中现成的动画效果。默认情况下,NotifyToasts中的showTopRight方法和showBottomRight方法使用了 AnimateStyles.slideInRight 动画效果;showTopLeft方法和showBottomLeft方法使用了AnimateStyles.slideInLeft动画效果。

你可以通过 NotifyToasts 中任意一个静态方法的 animationEffect 参数指定动画效果。例如:

SemanticButton(shrink: true,onTap: () => NotifyToasts.showTopRight(context,animationEffect: AnimateStyles.zoomInRight,title: 'Custom Animation',message: 'Use AnimateStyles.zoomInRight animation effect.',),isOutlined: true,text: 'AnimateStyles.zoomInRight',
)

代码的运行效果如下:

example_oRw9m9WFAl

需要注意的是,选择符合逻辑的动画能够让消息吐丝的进入和退出看起来更加自然。就比如这个例子中,showTopRight使用了zoomInRight动画,而不是zoomInLeft动画。

另外,如果有需要,你可以通过animationDuration参数来指定。如未指定,则采用默认的300毫秒。

7. 关闭按钮

默认情况下,每一条消息吐丝都带有一个关闭按钮。如果不显示关闭按钮,则可以指定showClose属性的值为flase。例如:

SemanticButton(shrink: true,onTap: () => NotifyToasts.showTopRight(context,title: 'close icon button',showClose: false,message:'You can disable the close icon button by specifying the value of the showClose property as flase.',),isOutlined: true,text: 'close icon button',
)

代码的运行效果如下:

example_hLZFdhRnWm

8. 禁用自动移除

默认情况下,一旦到达指定时间则消息吐丝将被自动移除。不过如果指定了autoClose为false,则需要手动点击关闭按钮。例如:

SemanticButton(shrink: true,onTap: () => NotifyToasts.showTopRight(context,title: 'Jack Lee',autoClose: false,icon: Picture(source: 'assets/jclee95.png'),message: 'JackLee, the author of this library, is a good boy.',),isOutlined: true,text: 'Jack Lee',
)

代码的运行效果如下:

example_11BEIJRAt5

如果禁用自动移除,不管showClose是否为false,都将启用关闭按钮图标。

9. 点击事件

SemanticButton(shrink: true,onTap: () => NotifyToasts.showTopRight(context,autoClose: false,title: 'Click Login',message: 'Click the message toast to jump to the login page.',onTap: () => Navigator.of(context).pushNamed('/login'),),text: 'OnTap Callback',
)

代码的运行效果如下:

example_s2AsI6WQKD

F. 报告问题和贡献代码

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

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

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

相关文章

Hyperledger Fabric:构建企业级区块链网络的利器

一、引言 在数字化浪潮中,区块链技术如同一颗璀璨的明珠,以其去中心化、数据不可篡改的特性,在金融、供应链、物联网等多个领域大放异彩。而在这个领域里,Hyperledger Fabric以其开源、灵活、安全的特点,成为企业级区…

ICode国际青少年编程竞赛- Python-1级训练场-基础训练2

ICode国际青少年编程竞赛- Python-1级训练场-基础训练2 1、 a 4 # 变量a存储的数字是4 Dev.step(a) # 因为变量a的值是4,所以Dev.step(a)就相当于Dev.step(4)2、 a 1 # 变量a的值为1 for i in range(4):Dev.step(a)Dev.turnLeft()a a 1 # 变量a的值变为…

C语言数据结构之队列

目录 1.队列的概念及结构2.队列的实现逻辑3.队列的代码实现4.相关例题选择题 •͈ᴗ•͈ 个人主页:御翮 •͈ᴗ•͈ 个人专栏:C语言数据结构 •͈ᴗ•͈ 欢迎大家关注和订阅!!! 1.队列的概念及结构 队列:只允许在一端进行插入数据操作&#x…

【Flask 系统教程 2】路由的使用

Flask 是一个轻量级的 Python Web 框架,其简洁的设计使得构建 Web 应用变得轻而易举。其中,路由是 Flask 中至关重要的一部分,它定义了 URL 与视图函数之间的映射关系,决定了用户请求的处理方式。在本文中,我们将深入探…

C++关联容器1——map,multimap,set,multiset介绍,pair类型

目录 关联容器 使用关联容器 使用map 使用set 关联容器概述 定义关联容器 初始化multimap或multiset 关键字类型的要求 有序容器的关键字类型 使用关键字类型的比较函数 pair 类型 创建pair 对象的函数 关联容器 关联容器支持高效的关键字查找和访问。 两个主要的关…

【阿里云服务器】ubuntu 22.04.1安装docker以及部署java环境

我的服务器配置是2GB CPU 2GB 内存 Ubuntu22.04 目录 一、阿里云 ubuntu 22.04.1安装docker 二、docker基础命令 三、Windows电脑访问云服务器 四、安装java环境 安装OpenJDK 8(可以根据需要安装其他版本的JDK) 安装java的依赖管理工具maven 一、…

Java | Spring框架 | BeanFactory与ApplicationContext

Spring容器:BeanFactory与ApplicationContext Spring容器是Spring框架的核心,负责实例化、配置和组装Bean。 Spring容器有两种主要类型:BeanFactory和ApplicationContext。 一、BeanFactory 基本功能:BeanFactory是Spring框架…

Web Storage 笔记12 操作购物车

相关内容:购物车实例 WebStorage存储空间足够大,访问都在客户端(Client)完成。有些客户端先处理或检查数据,就可以直接使用WebStorage进行存储,不仅可以提高访问速度,还可以降低服务器的练习。负担。例如,购…

vue设置必填项

表单&#xff1a; <el-form-item label"标题" prop"title" ><el-input placeholder"标题" v-model"form.title"></el-input></el-form-item> 在data中添加一个rules来规定 rules: {title: [{ required: t…

webpack打包后index.html引用文件地址问题

在前端开发中&#xff0c;src 属性指定的相对路径是相对于当前 HTML 文件的路径&#xff0c;而不是相对于网站的根目录。这种相对路径的解析方式是浏览器的行为。 当浏览器解析 HTML 文件中的 <script> 标签时&#xff0c;它会根据相对路径来构建请求 URL。如果你在 HTM…

刷机维修进阶教程-----魅族机型更改参数 修复基带 操作步骤解析

前面几篇博文简单解析了下小米 vivo oppo等机型修复基带与更改参数的一些步骤。对于高通芯片来说。明白其原理。一通百通。最近有粉丝私信询问一键新机有关事宜。在与一些工作室合作中发现。一些过项目具体检测的要区别对待。有的只需要修改型号即可方便跳过项目的校验机制, …

DiffSeg——基于Stable Diffusion的无监督零样本图像分割

概述 基于计算机视觉的模型的核心挑战之一是生成高质量的分割掩模。大规模监督训练的最新进展已经实现了跨各种图像风格的零样本分割。此外&#xff0c;无监督训练简化了分割&#xff0c;无需大量注释。尽管取得了这些进展&#xff0c;构建一个能够在没有注释的零样本设置中分…

带文字海报流程自动化

上一篇文章&#xff1a; 带文字海报流程自动化 - 知乎 项目代码整理在&#xff1a; https://github.com/liangwq/Chatglm_lora_multi-gpu​github.com/liangwq/Chatglm_lora_multi-gpu 根据用户的输入生成图片prompt模块代码封装&#xff1a; from openai import OpenAI im…

【无标题】vue webrtc 播放rtsp视频流

最近有个小活其中有涉及播放大华及海康摄像头视频流的需求&#xff0c;经调查发现可以使用webrtc来实现相关功能&#xff0c;记录一下&#xff0c;步骤如下&#xff1a; &#xff11;、下载webrtc &#xff1a;Releases mpromonet/webrtc-streamer GitHub winows下下载&…

华为机考入门python3--(22)牛客22- 汽水瓶

分类&#xff1a;数字 知识点&#xff1a; 整除符号// 5//3 1 取余符号% 5%3 2 题目来自【牛客】 import sysdef calc_soda_bottles(n):if n 0: # 结束输入&#xff0c;不进行处理returnelse:# 循环进行汽水换算total_drunk 0 # 记录总共喝了多少瓶汽水while…

永不过期的SSL/TLS证书解决方案

前提: cloudflare API 密钥宝塔面板安装了nginx 如果你不使用宝塔面板,可以参照脚本修改 生成证书脚本 curl -sS -O https://raw.githubusercontent.com/woniu336/open_shell/main/ssl_pro.sh && chmod x ssl_pro.sh && ./ssl_pro.sh使用方法: https://blo…

城市反无人机技术

一、城市环境下反无人机难点 1) 城市建筑密级遮挡严重 城市中建筑物密集&#xff0c;通视条件差。设备若部署于地面&#xff0c;受限于建筑物遮挡&#xff0c;探测和处置距离有限。因此&#xff0c;通常采用将设备部署于建筑物楼顶的方式应对无人机威胁。此种方式对于飞行在楼…

Windows系统如何切换32位和64位Python

1.简介 由于需要编译32位的程序&#xff0c;默认已经安装了Anaconda和Pycharm&#xff0c;虚拟环境使用的是64位Python&#xff0c;现在需要使用32位Python开发32位的软件程序。 2.操作过程 2.1查询自己的conda是32位还是64位 打开 Anaconda 命令提示符或任何命令行界面&am…

golang使用DoH解析域名

按照RFC 8484 规范&#xff0c;DoH服务器支持GET或POST两种方式。 当使用GET方法&#xff0c;唯一的变量"dns"被赋值为base64url编码的DNS请求内容。 These examples use a DoH service with a URI Template of"https://dnsserver.example.net/dns-query{?dns}…

USP技术提升大语言模型的零样本学习能力

大语言模型&#xff08;LLMs&#xff09;在零样本和少样本学习能力上取得了显著进展&#xff0c;这通常通过上下文学习&#xff08;in-context learning, ICL&#xff09;和提示&#xff08;prompting&#xff09;来实现。然而&#xff0c;零样本性能通常较弱&#xff0c;因为缺…