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

效果

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

源碼下載

在Github或碼云上查看本篇文章全部代碼.

尋找fluttertoast

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

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

看到第一條:

99分, 相當高的評分

點進去:

查看最新版本發布日期和兼容性:

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

同時支持Android、IOS以及Web. 兼容性很好.

實戰開始

創建項目

創建一個Flutter項目, 先來清理項目.

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

通過flutter創建的項目的./lib/main.dart會有很多自帶的注釋, 我們替換整個文件為:

import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget 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> {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(widget.title),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[],),),);} } 代碼解析: 刪除了多余的注釋, 和部分初始化的按鈕. 添加一些名稱.

運行項目, 應該相當簡潔:

引入依賴

在./pubspec.yaml中添加依賴:

fluttertoast: ^4.0.1

提示: 一定要注意字符縮進. 縮進不正確會導致導入失敗!

運行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);}, )下面會詳細解釋各個參數的作用, 先運行, 一睹為快!

具體位置如圖:

運行項目(因為有新導入的庫, 所以建議先停止, 再重新運行), 點擊"彈出toast"按鈕試試

成功運行.

下面來介紹一下Fluttertoast.showToast的詳細參數(知乎不能插入表格...大家可以去我的網站看):

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

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

主動隱藏toast

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

在剛才的按鈕下方再添加一個按鈕:

RaisedButton(child: Text("隱藏toast"),onPressed: () => Fluttertoast.cancel(), )

如圖:

運行項目, 先點擊"彈出toast"按鈕, 緊接著點擊"隱藏toast`按鈕, 你會發現提示立刻消失:

大功告成

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

源碼下載

在

Github?github.com

或

HarrisonQI/flutter-actual-combat-demo?gitee.com

上查看本篇文章全部代碼.

感謝

• fluttertoast - pub.dev
• FlutterToast - Github
• Pexels 上的 Francesco Ungaro 拍攝的照片
• (排名不分先后)

結語

Flutter Toast、彈出提示、輕提示 - 阿航的技術小站?www.bugcatt.com

更多技術干貨, 歡迎訪問

阿航的技術小站?www.bugcatt.com

總結

以上是生活随笔為你收集整理的qtreeview 点击二级节点弹出dialog_Flutter Toast、弹出提示、轻提示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。