时间:2021-05-20
本文实例为大家分享了flutter Toast实现消息提示框的具体代码,供大家参考,具体内容如下
使用方法
//默认是显示在中间的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; }}以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
在前面的实例中,已经应用过Toast类来显示一个简单的提示框了。这次将对Toast进行详细介绍。Toast类用于在屏幕中显示一个消息提示框,该消息提示框没有任何
做Android的时候对toast是很熟悉的.微信小程序开发中toast也是重要的消息提示方式.提示框:wx.showToast(OBJECT)显示消息提示框O
1.自定义提示框组件src/components/Toast/index.js/***自定义提示框(Toast)组件*/varToast={};varshowT
本文实例总结了Android开发中Toast显示消息的方法。分享给大家供大家参考,具体如下:Android中提供一种简单的Toast消息提示框机制,可以在用户点
Toast是一种简易的消息提示框,它无法获取焦点,按设置的时间来显示完以后会自动消失,一般用于帮助或提示。先给大家分享下我的解决思路:不用计算Toast的时间之