詳解Android中motion_toast的使用

2022-06-15 10:00:11

前言

我們通常會用 toast（也叫吐司）來顯示提示資訊，例如網路請求錯誤，校驗錯誤等等。大多數 App的 toast 都很簡單，簡單的半透明黑底加上白色文字草草了事，比如下面這種.

說實話，這種toast 的體驗很糟糕。假設是新手使用者，他們並不知道 toast 從哪裡出來，等出現錯誤的時候，閃現出來的時候，可能還沒抓住內容的重點就消失了（尤其是想截圖抓錯誤的時候，更抓狂）。這是因為一個是這種 toast 一般比較小，而是動效非常簡單，用來提醒其實並不是特別好。怎麼破？本篇來給大家介紹一個非常有趣的 toast 元件 —— motion_toast。

motion_toast 介紹

從名字就知道，motion_toast 是支援動效的，除此之外，它的顏值還很高，下面是它的一個範例動圖，仔細看那個小鬧鐘圖示，是在跳動的哦。這種提醒效果比起常用的 toast 來說醒目多了，也更有趣味性。

下面我們看看 motion_toast 的特性：

可以通過動畫圖示實現動效；
內建了成功、警告、錯誤、提醒和刪除型別；
支援自定義；
支援不同的主題色；
支援 null safety；
心跳動畫效果；
完全自定義的文字內容；
內建動畫效果；
支援自定義佈局（LTR 和 RTL）；
自定義持續時長；
自定義展現位置（居中，底部或頂部）；
支援長文字顯示；
自定義背景樣式；
自定義消失形式。

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

範例

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

最簡單用法

只需要一行程式碼搞定！其他引數在 success 的命名構造方法中預設了，因此使用非常簡單。

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

其他內建的提醒

內建的提醒也支援我們修改預設引數進行樣式調整，如標題、位置、寬度、顯示位置、動畫曲線等等。

// 錯誤提示
MotionToast.error(
  description: '發生錯誤！',
  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);

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

不過需要注意的是，一個是 dismissable 引數只對顯示位置在底部的有用，當在底部且dismissable為 true 時，點選空白處可以讓 toast 提前消失。另外就是顯示位置 position 和 animationType 是存在某些互斥關係的。從原始碼可以看到底部顯示的時候，animationType不能是 fromTop，頂部顯示的時候 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

自定義其實就是使用 MotionToast 構建一個範例，其中，description，icon 和 primaryColor引數是必傳的。自定義的引數很多，使用的時候建議看一下原始碼註釋。

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);

下面對自定義的一些引數做一下解釋：

icon：圖示，IconData 類，可以使用系統字型圖示；
primaryColor：主顏色，也就是大的背景底色；
secondaryColor：輔助色，也就是圖示和旁邊的豎條的顏色；
descriptionStyle：toast 文字的字型樣式；
title：標題文字；
titleStyle：標題文字樣式；
toastDuration：顯示時長；
backgroundType：背景型別，列舉值，共三個可選值，transparent，solid和 lighter，預設是 lighter。lighter其實就是加了一層白色底色，然後再將原先的背景色（主色調）加上一定的透明度疊加到上面，所以看起來會泛白。
onClose：關閉時回撥，可以用於出現多個錯誤時依次展示，或者是關閉後觸發某些動作，如返回上一頁。

總結

看完之後，是不是覺得以前的 toast 太醜了？用 motion_toast來一個更有趣的吧。另外，整個 motion_toast 的原始碼並不多，有興趣的可以讀讀原始碼，瞭解一下toast 的實現也是不錯的。

到此這篇關於詳解Android中motion_toast的使用的文章就介紹到這了,更多相關Android motion_toast內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

詳解Android中motion_toast的使用

目錄

前言

motion_toast 介紹

範例

最簡單用法

其他內建的提醒

自定義 toast

總結

熱門文章