Flutter笔记:Widgets Easier组件库(11)- 使用提示吐丝

embedded/2024/9/24 6:02:12/
Flutter笔记
Widgets Easier组件库(11)使用提示吐丝

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

组件库地址

  • 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组件库(10)快速处理承若型对话 | 下一节:《 Widgets Easier组件库(12)- 使用标签


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. TipToasts工具简介

TipToasts 是一个用于在 Flutter 应用中显示提示消息的工具类,是一种最简单的吐丝。它提供了一种简单而灵活的方式来在屏幕的不同位置显示短暂的提示信息,并支持自定义动画效果和样式。TipToast 适用各种需要简单提示性的场景:

  1. 显示操作成功或失败的提示信息;
  2. 向用户提供通知或警告;
  3. 在用户执行特定操作后给予反馈;
  4. 显示临时的状态信息。

TipToasts 提供了几个静态方法来显示提示消息,分别是toCenter、toTop和toBottom。

3. toCenter方法

static void toCenter(BuildContext context,String message, {double opacity = 0.7,Color backgroundColor = Colors.black,TextStyle textStyle = const TextStyle(color: Colors.white, fontSize: 16),double maxWidth = double.infinity,
})

toCenter方法是一个静态方法,该方法用于在屏幕中央显示提示消息,包含以下参数:

  • context: 构建上下文;
  • message: 要显示的文本消息;
  • opacity:背景透明度,默认为 0.7;
  • backgroundColor:背景颜色,默认为黑色;
  • textStyle:文本样式,默认为白色字体,字号为 16;
  • messageStyle: 消息文本的样式;
  • maxWidth: 提示消息的最大宽度,默认为 200。

例如:

SemanticButton(shrink: true,text: 'toCenter',onTap: () => TipToasts.toCenter(context, 'toCenter'),
)

example_JskzbjcvBA

4. toTop方法

该方法用于在屏幕顶部显示提示消息,并可以指定垂直偏移量。

static void toTop(BuildContext context,String message, {double offset = 100,double opacity = 0.7,Color backgroundColor = Colors.black,TextStyle textStyle = const TextStyle(color: Colors.white, fontSize: 16),double maxWidth = double.infinity,
})

其中参数offset表示从屏幕顶部的垂直偏移量,默认为 100,其他参数与 toCenter 方法相同。

例如:

SemanticButton(shrink: true,text: 'toTop',onTap: () => TipToasts.toTop(context, 'toTop'),
)

example_NznGSg2hm0

5. toBottom 方法

该方法用于在屏幕底部显示提示消息,并可以指定垂直偏移量。

static void toBottom(BuildContext context,String message, {double offset = 100,double opacity = 0.7,Color backgroundColor = Colors.black,TextStyle textStyle = const TextStyle(color: Colors.white, fontSize: 16),double maxWidth = double.infinity,
})

其中参数offset表示从屏幕底部的垂直偏移量,默认为 100。

例如:

SemanticButton(shrink: true,text: 'toBottom',onTap: () => TipToasts.toBottom(context, 'toBottom'),
)

example_hbHZoFAO8O

F. 报告问题和贡献代码

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


http://www.ppmy.cn/embedded/33419.html

相关文章

JavaEE >> Spring MVC(2)

接上文 本文介绍如何使用 Spring Boot/MVC 项目将程序执行业务逻辑之后的结果返回给用户,以及一些相关内容进行分析解释。 返回静态页面 要返回一个静态页面,首先需要在 resource 中的 static 目录下面创建一个静态页面,下面将创建一个静态…

配电室智能巡检机器人

近年来,生产过程高度自动化,各工矿企业关键场所需定期巡检维护。但目前巡检主要靠人工,既耗时费力效率又低,且受环境等因素影响,巡检难以全面规范,隐患或问题易被忽视。在此情况下,如何利用现有…

大模型下的Agent、AIGC的商业案例集合

算是一份摘录 1 AIGC 对影楼的影响 https://mp.weixin.qq.com/s/3j-6FAxZEEvXUZ1q6by2uw 2 出海Talkie :情感智能体 https://mp.weixin.qq.com/s/KHPmfuVvywxxcI2rqoOghA Talkie 为每条消息提供 3 个免费灵感,如果用户需要更多 AI 生成的灵感选项&…

Stacking算法:集成学习的终极武器

Stacking算法:集成学习的终极武器 在机器学习的竞技场中,集成学习方法以其卓越的性能而闻名。其中,Stacking(堆叠泛化)作为一种高级集成技术,更是被誉为“集成学习的终极武器”。本文将带你深入了解Stacki…

Redisson 分布式锁和同步器

系列文章目录 文章目录 系列文章目录前言前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男女通用,看懂了就去分享给你的码吧。 redisson 是基于redis的扩展库,使得redis除了应用于缓存以外,还能做队列…

SpringBoot+vue实现token认证登录

目录 后端(Spring Boot) 1. 创建用户实体和数据库表 2. 用户注册和登录接口 3. JWT Token生成 4. JWT Token验证 前端(Vue.js) 1. 用户界面 2. 发送登录请求 3. 接收并存储Token

Vagrant CentOS7 安装 Docker 及使用 Docker 安装 MySQL

1、安装 Docker 1.1、删除旧版本 sudo yum remove docker \docker-client \docker-client-latest \docker-common \docker-latest \docker-latest-logrotate \docker-logrotate \docker-engine 1.2、安装必要的依赖包 sudo yum install -y yum-utils 1.3、配置源地址&#xf…

Qt扫盲-Qt D-Bus概述

Qt D-Bus概述 一、概述二、总线三、相关概念1. 消息2. 服务名称3. 对象的路径4. 接口5. 备忘单 四、调试五、使用Qt D-Bus 适配器1. 在 D-Bus 适配器中声明槽函数1. 异步槽2. 只输入槽3. 输入输出槽4. 自动回复5. 延迟回复 一、概述 D-Bus是一种进程间通信(IPC)和远程过程调用…