溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

flutterToast中怎么實現一個消息提示框

發(fā)布時間:2021-08-09 16:48:10 來源:億速云 閱讀:151 作者:Leah 欄目:編程語言

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è)資訊頻道,感謝各位的閱讀!

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI