温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

flutterToast中怎么实现一个消息提示框

发布时间:2021-08-09 16:48:10 来源:亿速云 阅读:153 作者: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中怎么实现一个消息提示框的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注亿速云行业资讯频道,感谢各位的阅读!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI