Flutter Overlay+Overlay+MouseRegion实现多级菜单

—片槐树叶

于 2021-08-17 19:08:13 发布

阅读量1.8k

点赞数 2

本文链接：https://blog.csdn.net/flutter_learner/article/details/119763791

版权

本文介绍了如何在Flutter中使用Overlay和MouseRegion实现多级菜单功能。通过创建两个OverlayEntry来展示悬浮窗口，利用CompositedTransformTarget在点击初级菜单时弹出二级菜单。MouseRegion用于检测鼠标悬停，实现鼠标移到二级菜单时不立即关闭的效果。通过调整Exit函数，确保鼠标从初级菜单向二级菜单移动时二级菜单保持显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Flutter并没有Qt一样提供菜单栏多级菜单，想要实现该功能就需要自定义，已知点击按钮可以通过Overlay弹出菜单悬浮框，考虑可不可以在ovelay中在嵌入一个Overlay实现多级菜单，实践证明该方法可行，

具体实现为先定义两个 OverlayEntry作为要显示悬浮窗

LayerLink fixLink = new LayerLink();
  OverlayEntry? fixOverlay;
  LayerLink moveMailLink = new LayerLink(); //移动邮件选择
  OverlayEntry? moveMailOverlay;

之后创建初级菜单

OverlayEntry creatFixOverlay() {
    OverlayEntry fixOverlay = new OverlayEntry(builder: (context) {
      return Positioned(
        width: 200,
        child: new CompositedTransformFollower(
          link: fixLink,
          offset: Offset(0, 30),
          child: new Material(
            child: Container(
                decoration: BoxDecoration(
                    border: Border.all(width: 0.2, color: Colors.black45)),

最低0.47元/天解锁文章