当前位置： 移动技术网 > 移动技术>移动开发>Android > flutter Toast实现消息提示框

flutter Toast实现消息提示框

2019年09月06日  | 移动技术网移动技术  | 我要评论

本文实例为大家分享了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;
 }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网