服务器之家:专注于VPS、云服务器配置技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - Android - flutter Toast实现消息提示框

flutter Toast实现消息提示框

2022-10-25 14:41早起的年轻人 Android

这篇文章主要为大家详细介绍了flutter Toast实现消息提示框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

flutter Toast实现消息提示框

使用方法

?
1
2
3
4
5
//默认是显示在中间的
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 源码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
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;
 }
}

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

原文链接:https://blog.csdn.net/zl18603543572/article/details/95636351

延伸 · 阅读

精彩推荐