欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

flutter Toast实现消息提示框

程序员文章站 2022-04-28 17:44:22
本文实例为大家分享了flutter toast实现消息提示框的具体代码,供大家参考,具体内容如下 使用方法 //默认是显示在中间的 toast.toast...

本文实例为大家分享了flutter toast实现消息提示框的具体代码,供大家参考,具体内容如下

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;
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。