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

效果

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

源碼下載

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

尋找fluttertoast

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

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

看到第一條:

99分, 相當(dāng)高的評分

點進(jìn)去:

查看最新版本發(fā)布日期和兼容性:

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

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

實戰(zhàn)開始

創(chuàng)建項目

創(chuàng)建一個Flutter項目, 先來清理項目.

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

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

import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: '阿航的技術(shù)小站 Flutter toast',theme: ThemeData(primarySwatch: Colors.blue,),home: MyHomePage(title: 'Flutter toast實戰(zhàn)'),);} }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>[],),),);} } 代碼解析: 刪除了多余的注釋, 和部分初始化的按鈕. 添加一些名稱.

運行項目, 應(yīng)該相當(dāng)簡潔:

引入依賴

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

fluttertoast: ^4.0.1

提示: 一定要注意字符縮進(jìn). 縮進(jìn)不正確會導(dǎo)致導(dǎo)入失敗!

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

flutter pub get

創(chuàng)建按鈕

回到./lib/main.dart, 在Column內(nèi)添加一個按鈕:

RaisedButton(child: Text("彈出toast"),onPressed: (){}, )該按鈕等下用來觸發(fā)彈出toast

使用fluttertoast

導(dǎo)入fluttertoast:

import 'package:fluttertoast/fluttertoast.dart';

上面創(chuàng)建的按鈕中的onPressed中添加函數(shù), 替換上面的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);}, )下面會詳細(xì)解釋各個參數(shù)的作用, 先運行, 一睹為快!

具體位置如圖:

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

成功運行.

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

你可以自己隨意傳入?yún)?shù)和值來看看效果!

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

主動隱藏toast

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

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

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

如圖:

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

大功告成

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

源碼下載

在

Github?github.com

或

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

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

感謝

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

結(jié)語

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

更多技術(shù)干貨, 歡迎訪問

阿航的技術(shù)小站?www.bugcatt.com

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。