Flutter笔记：Widgets Easier组件库（11）- 使用提示吐丝（Tip Toasts）

Flutter笔记 Widgets Easier组件库（11）使用提示吐丝

---

• 文章信息 - 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/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组件库中提示吐丝的用法。

](https://jclee95.blog.csdn.net/)

---

上一节：《Widgets Easier组件库（10）快速处理承若型对话》 | 下一节：《 Widgets Easier组件库（12）- 使用标签 》

---

目 录

---

• [1. 概述](#1. 概述)
• • [1.1 关于Widgets Easier](#1.1 关于Widgets Easier)
  • [1.2 模块安装](#1.2 模块安装)
• [2. TipToasts工具简介](#2. TipToasts工具简介)
• [3. toCenter方法](#3. toCenter方法)
• [4. toTop方法](#4. toTop方法)
• [5. toBottom 方法](#5. toBottom 方法)
• [F. 报告问题和贡献代码](#F. 报告问题和贡献代码)

---

[1. 概述](#1. 概述)

[1.1 关于Widgets Easier](#1.1 关于Widgets Easier)

本库是一个 Flutter 组件库，旨在提供用于Flutter开发的组件，使得开发者能够更简单地构建出更丰富地界面效果。项目地址为：

• https://github.com/jacklee1995/widgets_easier

• https://pub.dev/packages/widgets_easier

[1.2 模块安装](#1.2 模块安装)

在你的Flutter项目中，运行下面的命令：

flutter pub add widgets_easier

即可安装最新版本的 Widgets Easier 库。

[2. TipToasts工具简介](#2. TipToasts工具简介)

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

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

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

另请参见消息吐丝，是另外一种类型的吐丝：

地址为：https://jclee95.blog.csdn.net/article/details/138425637

[3. toCenter方法](#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'),
)

[4. toTop方法](#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'),
)

[5. toBottom 方法](#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'),
)

[F. 报告问题和贡献代码](#F. 报告问题和贡献代码)

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