您好,登錄后才能下訂單哦!
flutterToast中怎么實現一個消息提示框,相信很多沒有經驗的人對此束手無策,為此本文總結了問題出現的原因和解決方法,通過這篇文章希望你能解決這個問題。
使用方法
//默認是顯示在中間的Toast.toast(context,msg: "中間顯示的 "); Toast.toast(context,msg: "中間顯示的 ",position: ToastPostion.center);Toast.toast(context,msg: "頂部顯示的 Toast $_count",position: ToastPostion.top);Toast.toast(context,msg: "底部顯示的 Toast $_count",position: ToastPostion.bottom);
Toast 源碼
import 'package:flutter/cupertino.dart';import 'package:flutter/material.dart';//Toast 顯示位置控制 enum ToastPostion { top, center, bottom,}class Toast { // toast靠它加到屏幕上 static OverlayEntry _overlayEntry; // toast是否正在showing static bool _showing = false; // 開啟一個新toast的當前時間,用于對比是否已經展示了足夠時間 static DateTime _startedTime; // 提示內容 static String _msg; // toast顯示時間 static int _showTime; // 背景顏色 static Color _bgColor; // 文本顏色 static Color _textColor; // 文字大小 static double _textSize; // 顯示位置 static ToastPostion _toastPosition; // 左右邊距 static double _pdHorizontal; // 上下邊距 static double _pdVertical; static void toast( BuildContext context, { //顯示的文本 String msg, //顯示的時間 單位毫秒 int showTime = 1000, //顯示的背景 Color bgColor = Colors.black, //顯示的文本顏色 Color textColor = Colors.white, //顯示的文字大小 double textSize = 14.0, //顯示的位置 ToastPostion position = ToastPostion.center, //文字水平方向的內邊距 double pdHorizontal = 20.0, //文字垂直方向的內邊距 double pdVertical = 10.0, }) async { assert(msg != null); _msg = msg; _startedTime = DateTime.now(); _showTime = showTime; _bgColor = bgColor; _textColor = textColor; _textSize = textSize; _toastPosition = position; _pdHorizontal = pdHorizontal; _pdVertical = pdVertical; //獲取OverlayState OverlayState overlayState = Overlay.of(context); _showing = true; if (_overlayEntry == null) { //OverlayEntry負責構建布局 //通過OverlayEntry將構建的布局插入到整個布局的最上層 _overlayEntry = OverlayEntry( builder: (BuildContext context) => Positioned( //top值,可以改變這個值來改變toast在屏幕中的位置 top: buildToastPosition(context), child: Container( alignment: Alignment.center, width: MediaQuery.of(context).size.width, child: Padding( padding: EdgeInsets.symmetric(horizontal: 40.0), child: AnimatedOpacity( opacity: _showing ? 1.0 : 0.0, //目標透明度 duration: _showing ? Duration(milliseconds: 100) : Duration(milliseconds: 400), child: _buildToastWidget(), ), )), )); //插入到整個布局的最上層 overlayState.insert(_overlayEntry); } else { //重新繪制UI,類似setState _overlayEntry.markNeedsBuild(); } // 等待時間 await Future.delayed(Duration(milliseconds: _showTime)); //2秒后 到底消失不消失 if (DateTime.now().difference(_startedTime).inMilliseconds >= _showTime) { _showing = false; _overlayEntry.markNeedsBuild(); await Future.delayed(Duration(milliseconds: 400)); _overlayEntry.remove(); _overlayEntry = null; } } //toast繪制 static _buildToastWidget() { return Center( child: Card( color: _bgColor, child: Padding( padding: EdgeInsets.symmetric( horizontal: _pdHorizontal, vertical: _pdVertical), child: Text( _msg, style: TextStyle( fontSize: _textSize, color: _textColor, ), ), ), ), ); }// 設置toast位置 static buildToastPosition(context) { var backResult; if (_toastPosition == ToastPostion.top) { backResult = MediaQuery.of(context).size.height * 1 / 4; } else if (_toastPosition == ToastPostion.center) { backResult = MediaQuery.of(context).size.height * 2 / 5; } else { backResult = MediaQuery.of(context).size.height * 3 / 4; } return backResult; }}
看完上述內容,你們掌握flutterToast中怎么實現一個消息提示框的方法了嗎?如果還想學到更多技能或想了解更多相關內容,歡迎關注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。