快捷導(dǎo)航

詳解Android中motion_toast的使用

更新時(shí)間：2022年06月15日 08:47:09 作者：島上碼農(nóng)

我們通常會(huì)用 toast（也叫吐司）來顯示提示信息，例如網(wǎng)絡(luò)請(qǐng)求錯(cuò)誤，校驗(yàn)錯(cuò)誤等等。本文為大家介紹一個(gè)非常有趣的toast組件 —— motion_toast，感興趣的可以了解一下

前言

我們通常會(huì)用 toast（也叫吐司）來顯示提示信息，例如網(wǎng)絡(luò)請(qǐng)求錯(cuò)誤，校驗(yàn)錯(cuò)誤等等。大多數(shù) App的 toast 都很簡(jiǎn)單，簡(jiǎn)單的半透明黑底加上白色文字草草了事，比如下面這種.

說實(shí)話，這種toast 的體驗(yàn)很糟糕。假設(shè)是新手用戶，他們并不知道 toast 從哪里出來，等出現(xiàn)錯(cuò)誤的時(shí)候，閃現(xiàn)出來的時(shí)候，可能還沒抓住內(nèi)容的重點(diǎn)就消失了（尤其是想截屏抓錯(cuò)誤的時(shí)候，更抓狂）。這是因?yàn)橐粋€(gè)是這種 toast 一般比較小，而是動(dòng)效非常簡(jiǎn)單，用來提醒其實(shí)并不是特別好。怎么破？本篇來給大家介紹一個(gè)非常有趣的 toast 組件 —— motion_toast。

motion_toast 介紹

從名字就知道，motion_toast 是支持動(dòng)效的，除此之外，它的顏值還很高，下面是它的一個(gè)示例動(dòng)圖，仔細(xì)看那個(gè)小鬧鐘圖標(biāo)，是在跳動(dòng)的哦。這種提醒效果比起常用的 toast 來說醒目多了，也更有趣味性。

下面我們看看 motion_toast 的特性：

可以通過動(dòng)畫圖標(biāo)實(shí)現(xiàn)動(dòng)效；
內(nèi)置了成功、警告、錯(cuò)誤、提醒和刪除類型；
支持自定義；
支持不同的主題色；
支持 null safety；
心跳動(dòng)畫效果；
完全自定義的文本內(nèi)容；
內(nèi)置動(dòng)畫效果；
支持自定義布局（LTR 和 RTL）；
自定義持續(xù)時(shí)長(zhǎng)；
自定義展現(xiàn)位置（居中，底部或頂部）；
支持長(zhǎng)文本顯示；
自定義背景樣式；
自定義消失形式。

可以看到，除了能夠開箱即用之外，我們還可以通過自定義來豐富 toast 的樣式，使之更有趣。

示例

介紹完了，我們來一些典型的示例吧，首先在 pubspec.yaml 中添加依賴motion_toast: ^2.0.0（最低Dart版本需要2.12）。

最簡(jiǎn)單用法

只需要一行代碼搞定！其他參數(shù)在 success 的命名構(gòu)造方法中默認(rèn)了，因此使用非常簡(jiǎn)單。

MotionToast.success(description: '操作成功！').show(context);

其他內(nèi)置的提醒

內(nèi)置的提醒也支持我們修改默認(rèn)參數(shù)進(jìn)行樣式調(diào)整，如標(biāo)題、位置、寬度、顯示位置、動(dòng)畫曲線等等。

// 錯(cuò)誤提示
MotionToast.error(
  description: '發(fā)生錯(cuò)誤！',
  width: 300,
  position: MOTION_TOAST_POSITION.center,
).show(context);

//刪除提示
MotionToast.delete(
  description: '已成功刪除',
  position: MOTION_TOAST_POSITION.bottom,
  animationType: ANIMATION.fromLeft,
  animationCurve: Curves.bounceIn,
).show(context);

// 信息提醒（帶標(biāo)題）
 MotionToast.info(
  description: '這是一條提醒，可能會(huì)有很多行。toast 會(huì)自動(dòng)調(diào)整高度顯示',
  title: '提醒',
  titleStyle: TextStyle(fontWeight: FontWeight.bold),
  position: MOTION_TOAST_POSITION.bottom,
  animationType: ANIMATION.fromBottom,
  animationCurve: Curves.linear,
  dismissable: true,
).show(context);

不過需要注意的是，一個(gè)是 dismissable 參數(shù)只對(duì)顯示位置在底部的有用，當(dāng)在底部且dismissable為 true 時(shí)，點(diǎn)擊空白處可以讓 toast 提前消失。另外就是顯示位置 position 和 animationType 是存在某些互斥關(guān)系的。從源碼可以看到底部顯示的時(shí)候，animationType不能是 fromTop，頂部顯示的時(shí)候 animationType 不能是 fromBottom。

void _assertValidValues() {
  assert(
    (position == MOTION_TOAST_POSITION.bottom &&
            animationType != ANIMATION.fromTop) ||
        (position == MOTION_TOAST_POSITION.top &&
            animationType != ANIMATION.fromBottom) ||
        (position == MOTION_TOAST_POSITION.center),
  );
}

自定義 toast

自定義其實(shí)就是使用 MotionToast 構(gòu)建一個(gè)實(shí)例，其中，description，icon 和 primaryColor參數(shù)是必傳的。自定義的參數(shù)很多，使用的時(shí)候建議看一下源碼注釋。

MotionToast(
  description: '這是自定義 toast',
  icon: Icons.flag,
  primaryColor: Colors.blue,
  secondaryColor: Colors.green[300],
  descriptionStyle: TextStyle(
    color: Colors.white,
  ),
  position: MOTION_TOAST_POSITION.center,
  animationType: ANIMATION.fromRight,
  animationCurve: Curves.easeIn,
).show(context);

下面對(duì)自定義的一些參數(shù)做一下解釋：

icon：圖標(biāo)，IconData 類，可以使用系統(tǒng)字體圖標(biāo)；
primaryColor：主顏色，也就是大的背景底色；
secondaryColor：輔助色，也就是圖標(biāo)和旁邊的豎條的顏色；
descriptionStyle：toast 文字的字體樣式；
title：標(biāo)題文字；
titleStyle：標(biāo)題文字樣式；
toastDuration：顯示時(shí)長(zhǎng)；
backgroundType：背景類型，枚舉值，共三個(gè)可選值，transparent，solid和 lighter，默認(rèn)是 lighter。lighter其實(shí)就是加了一層白色底色，然后再將原先的背景色（主色調(diào)）加上一定的透明度疊加到上面，所以看起來會(huì)泛白。
onClose：關(guān)閉時(shí)回調(diào)，可以用于出現(xiàn)多個(gè)錯(cuò)誤時(shí)依次展示，或者是關(guān)閉后觸發(fā)某些動(dòng)作，如返回上一頁。