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

相关推荐
sunly_1 天前
Flutter:导航,tab切换,顶部固定,列表分页滚动
开发语言·javascript·flutter
敲代码的小强1 天前
Flutter项目兼容鸿蒙Next系统
flutter·华为·harmonyos
Zh-jie1 天前
flutter 快速实现侧边栏
前端·javascript·flutter
truemi.732 天前
flutter --no-color pub get 超时解决方法
android·flutter
王家视频教程图书馆2 天前
flutter 使用dio 请求go语言后台数据接口展示瀑布流图片
flutter
迷雾漫步者2 天前
Flutter组件————AppBar
flutter·跨平台·dart
AiFlutter2 天前
Flutter 开关属性
flutter
迷雾漫步者2 天前
Flutter组件————Scaffold
flutter·dart
ELI_He9992 天前
[flutter] 容器组件
flutter
SoaringHeart3 天前
Flutter疑难杂症:安卓手机键盘焦点丢失问题解决办法
前端·flutter