Flutter Toast、彈出提示、輕提示

harrisonqi發表於2020-05-23
FlutterAST

主流的三種APP反饋形式: toast、snackbar以及dialog. toast通常用於提示使用者一些不那麼重要的資訊, 會彈出並顯示文字一段時間. 時間一到就會消失. 相較於snackbar和dialog, 對螢幕的入侵較少. 身為開發人員怎能不掌握toast的基本使用? 這篇文章阿航就帶著大家一起探討一下Flutter中的toast.

效果

有圖有真相, 我們來看下我們本次要實現的最終效果:

06

原始碼下載

?在Github或碼雲上檢視本篇文章全部程式碼.

尋找fluttertoast

有同學會問, 為什麼要選擇外掛, 不選擇原生呢... 因為Flutter沒有我們所需的這種效果! 只有自帶的snackBar!

老樣子, 上pub.dev尋找我們所需的外掛, 在搜尋框輸入fluttertoast:

看到第一條:

01

99分, 相當高的評分.

點進去:

檢視最新版本釋出日期和相容性:

02

一般我們在選擇一款Flutter外掛時, 會先看它的評分(Flutter官方評分還是比較嚴格的). 之後再去看看它的最新日期(如果很久未更新, 可能專案已經停止維護了). 最後再來看看它的相容性, 是否合乎我們的規則.

同時支援Android、IOS以及Web. 相容性很好.

實戰開始

建立專案

建立一個Flutter專案, 先來清理專案.

刪除./test目錄, 因為我們的這個專案只是一個簡單的demo. 不需要測試驅動開發.

03

通過flutter建立的專案的./lib/main.dart會有很多自帶的註釋, 我們替換整個檔案為:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '阿航的技術小站 Flutter toast',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter toast實戰'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[],
        ),
      ),
    );
  }
}
複製程式碼

? 程式碼解析: 刪除了多餘的註釋, 和部分初始化的按鈕. 新增一些名稱.

? 執行專案, 應該相當簡潔:

04

引入依賴

在./pubspec.yaml中新增依賴:

  fluttertoast: ^4.0.1
複製程式碼

05

? 提示: 一定要注意字元縮排. 縮排不正確會導致匯入失敗!

執行IDE的Packages get或者在終端中輸入:

flutter pub get
複製程式碼

建立按鈕

回到./lib/main.dart, 在Column內新增一個按鈕:

RaisedButton(
  child: Text("彈出toast"),
  onPressed: (){},
)
複製程式碼

該按鈕等下用來觸發彈出toast

使用fluttertoast

匯入fluttertoast:

import 'package:fluttertoast/fluttertoast.dart';
複製程式碼

上面建立的按鈕中的onPressed中新增函式, 替換上面的RaisedButton為:

RaisedButton(
  child: Text("彈出toast"),
  onPressed: () {
    Fluttertoast.showToast(
                    msg: "你今天真好看",
                    toastLength: Toast.LENGTH_SHORT,
                    gravity: ToastGravity.BOTTOM,
                    timeInSecForIosWeb: 1,
                    backgroundColor: Colors.black45,
                    textColor: Colors.white,
                    fontSize: 16.0);
  },
)
複製程式碼

下面會詳細解釋各個引數的作用, 先執行, 一睹為快!

具體位置如圖:

07

? 執行專案(因為有新匯入的庫, 所以建議先停止, 再重新執行), 點選"彈出toast"按鈕試試:

06

成功執行.

下面來介紹一下Fluttertoast.showToast的詳細引數:

引數 引數型別 引數說明 是否必傳 預設值
msg String 設定toast展示的字串 √ -
gravity ToastGravity列舉 設定toast的展示位置.(Web端僅支援頂部和底部) × ToastGravity.BOTTOM
timeInSecForIosWeb int ios秒數 × 1
bgcolor Color toast背景色 × Colors.black
textcolor Color toast文字顏色 × Colors.white
fontSize float toast文字字型大小 × 16.0
webShowClose bool web端 是否顯示關閉按鈕("×"號) × false
webBgColor String web端 16進位制顏色, 比如#00b09b × 漸變色(#00b09b與#96c93d)
webPosition String web端 toast水平位置(left, center或right) × right

你可以自己隨意傳入引數和值來看看效果!

經過阿航的測試, fluttertoast本版本的web端不是非常好看. 所以不放出web端的截圖啦!

主動隱藏toast

toast不僅可以自動消失, 也可以根據我們的需要讓其立即消失.

在剛才的按鈕下方再新增一個按鈕:

RaisedButton(
  child: Text("隱藏toast"),
  onPressed: () => Fluttertoast.cancel(),
)
複製程式碼

如圖:

08

? 執行專案, 先點選"彈出toast"按鈕, 緊接著點選"隱藏toast`按鈕, 你會發現提示立刻消失:

09

大功告成

至此, 我們的教程已經基本完成. 如果你對本篇文章有任何問題, 歡迎在下方評論區進行討論.

原始碼下載

?在Github或碼雲上檢視本篇文章全部程式碼.

感謝

結語

原文連結

更多技術乾貨, 歡迎訪問阿航的技術小站

相關文章