叠加组件,可以悬浮在其他组件上边,我们通常使用他开发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;
}
}
}
效果图
添加曲线和不添加曲线效果对比
完整代码
查看完整代码
————————————————
版权声明:本文为CSDN博主「马志武」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/ruoshui_t/article/details/97803045