Flutter 借助flutter_portal复刻Pinterest菜单时如何让触发元素位于遮罩上层

现有实现达不到Pinterest的视觉表现，本质是Flutter的底层渲染规则导致的：

• 所有放在Overlay层的组件，渲染层级默认高于普通Widget树的内容
• 半透明遮罩放置在Overlay层，而蓝色触发卡片属于普通树组件，因此遮罩会覆盖在卡片上方，造成卡片被压暗的效果
• 借助flutter_portal的层级规则：嵌套越深的PortalEntry，对应的portal在Overlay栈中的z序越高，可以通过调整PortalEntry的嵌套顺序，自由控制Overlay内部的渲染层级，实现触发卡片浮在遮罩上层的效果。

1. 重构PortalEntry嵌套层级 #

按照z序从低到高的要求，把三个overlay元素（半透明遮罩、触发卡片、上下文菜单）按嵌套深度从浅到深排列，对应z序随嵌套深度提升：

• 最外层PortalEntry：绑定半透明全屏遮罩（z序最低，是Overlay层的最底层）
• 中间层PortalEntry：绑定蓝色触发卡片（z序比遮罩高，浮在遮罩上方，不会被压暗）
• 最内层PortalEntry：绑定上下文菜单（z序最高，浮在所有元素上方）

2. 保留布局占位元素 #

在最内层PortalEntry的child位置，放置和原蓝色卡片尺寸、圆角、颜色完全一致的Widget：

• 菜单关闭时，所有PortalEntry的portal都不显示，这个Widget完全代替原卡片做正常渲染和布局，不影响列表滚动、手势响应
• 菜单打开时，这个普通树位置的Widget会被下层的半透明遮罩压暗，而Overlay层的同位置蓝色卡片浮在遮罩上方，因为两者尺寸、位置完全对齐（PortalEntry默认中心对齐），视觉上和单张卡片的效果完全一致

3. 迁移交互与动画逻辑 #

• 把原蓝色卡片上的点击手势、倾斜动画，全部迁移到Overlay层的蓝色卡片组件上
• 菜单关闭的逻辑和之前保持一致：点击遮罩空白区域、点击触发卡片本身都可以反向关闭菜单
• 给Overlay层的卡片添加柔和阴影，模拟浮在遮罩上方的层次感

@override
Widget build(BuildContext context) {
  return AspectRatio(
    aspectRatio: 63.5 / 88.9,
    child: PortalEntry(
      // 最外层：半透明遮罩（Overlay最底层）
      visible: isMenuOpen,
      portal: Positioned.fill(
        child: Container(
          color: Colors.black.withOpacity(opacityAnimation.value / 2),
          child: GestureDetector(
            behavior: HitTestBehavior.opaque,
            onTap: () => controller.reverse(),
          ),
        ),
      ),
      child: PortalEntry(
        // 中间层：蓝色触发卡片（浮在遮罩上方）
        visible: isMenuOpen,
        portal: GestureDetector(
          onTapDown: (details) {
            if (controller.isCompleted) controller.reverse();
          },
          // 倾斜动画匹配Pinterest效果
          child: Transform.rotate(
            angle: radians(degreeAnimation.value * 5),
            child: Container(
              decoration: BoxDecoration(
                color: Colors.blue,
                borderRadius: BorderRadius.all(Radius.circular(8)),
                boxShadow: const [
                  BoxShadow(
                    color: Colors.black26,
                    blurRadius: 12,
                    offset: Offset(0, 4),
                  )
                ],
              ),
              child: const Center(
                child: Text(
                  'Card Widget',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
          ),
        ),
        child: PortalEntry(
          // 最内层：上下文菜单（Overlay最顶层）
          visible: isMenuOpen,
          portal: ContextualMenuWidget(),
          // 布局占位：和原卡片样式完全一致的组件
          child: GestureDetector(
            onTapDown: (details) {
              if (controller.isCompleted) return;
              menuPosX = details.globalPosition.dx;
              menuPosY = details.globalPosition.dy;
              controller.forward();
            },
            child: Container(
              decoration: const BoxDecoration(
                color: Colors.blue,
                borderRadius: BorderRadius.all(Radius.circular(8)),
              ),
            ),
          ),
        ),
      ),
    ),
  );
}

• 菜单打开时，其他页面元素会被半透明遮罩压暗，只有触发的蓝色卡片保持原亮度，甚至带轻微倾斜和悬浮阴影
• 菜单弹出在卡片上方，不会被卡片遮挡
• 菜单关闭时，页面布局和交互和修改前完全一致，没有错位、手势失效的问题

内容的提问来源于stack exchange，提问作者DimZ