网站建设资讯

NEWS

网站建设资讯

flutterToast中怎么实现一个消息提示框-创新互联

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中怎么实现一个消息提示框的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联行业资讯频道,感谢各位的阅读!


标题名称:flutterToast中怎么实现一个消息提示框-创新互联
本文URL:http://cdweb.net/article/jccjo.html