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

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


组件库地址


【介绍】:本文介绍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开发的组件,使得开发者能够更简单地构建出更丰富地界面效果。项目地址为:

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

在你的Flutter项目中,运行下面的命令:

bash 复制代码
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方法)

dart 复制代码
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。

例如:

dart 复制代码
SemanticButton(
  shrink: true,
  text: 'toCenter',
  onTap: () => TipToasts.toCenter(context, 'toCenter'),
)

[4. toTop方法](#4. toTop方法)

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

dart 复制代码
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 方法相同。

例如:

dart 复制代码
SemanticButton(
  shrink: true,
  text: 'toTop',
  onTap: () => TipToasts.toTop(context, 'toTop'),
)

[5. toBottom 方法](#5. toBottom 方法)

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

dart 复制代码
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。

例如:

dart 复制代码
SemanticButton(
  shrink: true,
  text: 'toBottom',
  onTap: () => TipToasts.toBottom(context, 'toBottom'),
)

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

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

相关推荐
lqj_本人4 分钟前
Flutter&鸿蒙next 状态管理框架对比分析
flutter·华为·harmonyos
起司锅仔4 小时前
Flutter启动流程(2)
flutter
hello world smile8 小时前
最全的Flutter中pubspec.yaml及其yaml 语法的使用说明
android·前端·javascript·flutter·dart·yaml·pubspec.yaml
lqj_本人8 小时前
Flutter 的 Widget 概述与常用 Widgets 与鸿蒙 Next 的对比
flutter·harmonyos
iFlyCai8 小时前
极简实现酷炫动效:Flutter隐式动画指南第二篇之一些酷炫的隐式动画效果
flutter
lqj_本人8 小时前
Flutter&鸿蒙next 中使用 MobX 进行状态管理
flutter·华为·harmonyos
lqj_本人8 小时前
Flutter&鸿蒙next 中的 setState 使用场景与最佳实践
flutter·华为·harmonyos
hello world smile9 小时前
Flutter常用命令整理
android·flutter·移动开发·android studio·安卓
lqj_本人12 小时前
Flutter&鸿蒙next 中的 Expanded 和 Flexible 使用技巧详解
flutter·harmonyos
lqj_本人15 小时前
Flutter&鸿蒙next 中的 Drawer 导航栏
flutter·华为·harmonyos