Flutter Widget之Overlay

珍惜当下-拥抱明天

已于 2022-04-28 19:09:16 修改

阅读量3.6k

点赞数 1

分类专栏： flutter 文章标签： flutter OverlayEntry Overlay

于 2022-04-28 18:54:21 首次发布

本文链接：https://blog.csdn.net/lebsharing/article/details/124480203

版权

Overlay + OverlayEntry

Overlay

Overlay是一个类似Stack的Widget，可以将OverlayEntry插入到Overlay中，将OverlayEntry中构建的小部件叠加悬浮在其他顶部小部件之上。可以实现类似悬浮小弹窗的效果，如Toast,安卓的PopupWindow.
另外Overlay本身使用的是Stack布局，因此OverlayEntry可以使用Position或者AnimatedPosition定位自己的位置。
最常见的用例是：有WidgetsApp或MaterialApp中的Navigator创建的Overlay.

  const Overlay({
   
    Key? key,
    this.initialEntries = const <OverlayEntry>[],//包含在叠加层中的Widget
    this.clipBehavior = Clip.hardEdge,
  })

通常我们可以直接使用Overlay.of(context)方法获取该context最近的OverlayState,然后通过OverlayState中的insert()或者insertAll()方法插入一个或多个悬浮的Widget。如果想移除悬浮Widget，可以通过OverlayEntry的remove()方法实现。

OverlayEntry

[Overlay] 中可以包含小部件的位置。

  OverlayEntry({
   
    required this.builder,//构建在Overlay中显示的Widget
    bool opaque = false,//builger中构建的widget是否遮挡整个Overlay,如果opaque=true,Overlay将不在构建该widget下面的widget，除非maintainState=true
    bool maintainState = false,//该widget是否必须显示在树种。即使opaque=true
  })

Overlay的使用

该示例实现如下效果：
点击“show icon”按钮，在右上角图标下显示一个悬浮提示。
![在这里插入图片描述](https://img-blog.csdnimg.cn/579872c28cdd4975b6e6df2a02615f56.png#pic_center

![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/2879feb827998d8d0bb598a8adefcc81.jpeg

class _SimpleOverlayPageState extends State<SimpleOverlayPage> {
   
  final GlobalKey _noticeKey = GlobalKey();
  OverlayEntry? _overlayEntry;
  
  @override
  Widget build(BuildContext context) {
   
    return Scaffold(
      appBar: AppBar(
        title: const Text("Overlay+OverlayEntry"),
        actions: [
          Padding(
            key: _noticeKey,
            padding: const EdgeInsets.all(16),
            child: const Icon(Icons.notifications),
          )
        ],
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            const Text("该示例在AppBar右上角的图标出显示一个提示信息"),
            TextButton(
              onPressed: () {
   
                showOverla