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 上提供反馈或报告问题。如果你觉得这个库缺少某个功能,请创建一个功能请求。欢迎提交拉取请求。

相关推荐
肥肥呀呀呀15 小时前
flutter 的热更新方案shorebird
flutter
snail20121117 小时前
Flutter接入ProtoBuff和原生Android通信【性能最优】
android·flutter
程序猿阿伟18 小时前
《让歌声跨越山海:Flutter借助Agora SDK实现高质量连麦合唱》
flutter
郝郝先生--1 天前
Flutter 异步原理-Zone
前端·flutter
怀君1 天前
Flutter——数据库Drift开发详细教程(四)
数据库·flutter
肥肥呀呀呀2 天前
flutter 资料收集
前端·flutter
程序猿阿伟2 天前
《社交应用架构生存战:React Native与Flutter的部署容灾决胜法则》
flutter·react native·架构
肥肥呀呀呀2 天前
flutter利用 injectable和injectable_generator 自动get_it注册
flutter
恋猫de小郭3 天前
Compose Multiplatform iOS 稳定版发布:可用于生产环境,并支持 hotload
android·flutter·macos·ios·kotlin·cocoa
yuanlaile3 天前
Flutter开发HarmonyOS实战-鸿蒙App商业项目
flutter·华为·harmonyos·flutter开发鸿蒙