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

最新推荐文章于 2024-10-18 12:46:18 发布

原创

最新推荐文章于 2024-10-18 12:46:18 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

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

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(
 &