Flutter Overlay、OverlayState、OverlayEntry 叠加 Toast Demo
叠加组件,可以悬浮在其他组件上边,我们通常使用他开发Toast、PopupWindow弹窗等
虽然可以直接创建Overlay ,但最常见的是在WidgetsApp或MaterialApp中使用导航器创建的叠加层。
使用方法
-
//获取实例
-
OverlayState overlayState = Overlay.of(_context);
-
//创建OverlayEntry
-
OverlayEntry overlayEntry = OverlayEntry(builder);
-
//显示到屏幕上
-
overlayState.insert(_overlayEntry);
-
//移除屏幕
-
overlayEntry.remove();
代码示例
一个透明渐变的 Toast Demo 代码片段,点击查看完整代码
-
//显示 文本 Toast 透明渐变 代码片段
-
static void _makeTextShowOpacity() async {
-
_showing = true;
-
//创建OverlayEntry
-
_overlayEntry = OverlayEntry(
-
builder: (BuildContext context) => Positioned(
-
//top值,可以改变这个值来改变toast在屏幕中的位置
-
top: _top,
-
child: Container(
-
alignment: Alignment.center,//居中
-
width: MediaQuery.of(context).size.width,//Container 宽
-
child: AnimatedOpacity(
-
//目标透明度
-
opacity: _showing ? 1.0 : 0.0,
-
//执行时间
-
duration: _showing ? Duration(milliseconds: _millisecondsShow) : Duration(milliseconds: _millisecondsHide),
-
child: _toastWidget,
-
),
-
),
-
)
-
);
-
//显示到屏幕上
-
Overlay.of(_context).insert(_overlayEntry);
-
//等待两秒
-
await Future.delayed(Duration(milliseconds: _milliseconds));
-
//2秒后 到底消失不消失
-
if (DateTime.now().difference(_startedTime).inMilliseconds >= _milliseconds) {
-
_showing = false;
-
//重新绘制UI,类似setState
-
_overlayEntry.markNeedsBuild();
-
//等待动画执行
-
await Future.delayed(Duration(milliseconds: _millisecondsHide));
-
if(!_showing){
-
_overlayEntry.remove();
-
_overlayEntry = null;
-
}
-
}
-
}
效果图
添加曲线和不添加曲线效果对比