Flutter Web 多视图嵌入 React 时，如何解决 Overlay 被宿主容器裁剪？

结论

按这份代码的结构，每个 FlutterView 都有自己的 Overlay，显示范围限于对应的视图。Overlay 不会自动挂载到浏览器的 document.body。要让菜单覆盖周围的 React 内容，需要在页面浮层中为菜单提供宿主区域，或由 React 渲染 DOM 菜单。

在保持原 hostElement 尺寸不变的前提下，仅调整 overflow、z-index 或切换到 rootOverlay，都不能让现有 DropdownButton2 的菜单自动跨出当前 FlutterView。

原材料没有提供 Flutter SDK、dropdown_button2 版本、实际宿主尺寸和渲染器信息，无法判断是否还存在特定版本的问题。可以先从视图边界入手排查，不必直接归因于插件缺陷。

为什么 Flutter 的 Overlay 无法直接覆盖 React 内容？

代码中的每个 View 都有自己的渲染树，并各自创建了 MaterialApp 和 Navigator。菜单使用的 Overlay 仍属于对应的视图。Flutter 的 View API 说明，View 会建立渲染到指定 FlutterView 的独立渲染树。

当前结构可以理解为：

React 页面
├── host div A
│   └── FlutterView A
│       └── MaterialApp / Navigator / Overlay
└── host div B
    └── FlutterView B
        └── MaterialApp / Navigator / Overlay

Overlay 可以让菜单覆盖同一视图内的其他 Flutter Widget，但它不是浏览器 DOM 浮层，也不会自动转移到另一个宿主元素。

下面的调用只会在 Flutter Widget 树中寻找更外层的 Overlay：

final overlay = Overlay.of(context, rootOverlay: true);

它不会寻找 document.body，也不会创建浏览器级浮层。Overlay.of 文档 将其查找范围限定在最近的 LookupBoundary 内。OverlayPortal 同样将内容渲染到 Flutter Overlay，其名称中的 Portal 不代表 DOM Portal，参见 OverlayPortal API。

为什么修改 CSS 和 maxHeight 没有效果？

这里涉及三个不同的层次：

• DOM 裁剪：祖先元素的 overflow、clip-path 等属性可能裁剪已经绘制的内容。
• Flutter 布局：菜单会依据当前视图和 Overlay 的可用空间进行布局。
• 视图输出范围：Flutter 内容最终仍由当前 FlutterView 输出。

overflow: visible 只能影响对应 DOM 层的裁剪，无法为 Flutter 扩展布局空间或创建跨视图的渲染目标。z-index 用于调整层叠顺序，也不会扩大视图。

下面的配置则只是放宽视图的高度约束：

viewConstraints: {
  minHeight: 100,
  maxHeight: Infinity,
}

Infinity 表示高度上限不受该参数限制，并不意味着视图拥有无限画布，或菜单可以脱离宿主。Flutter 官方说明，viewConstraints 必须与宿主 CSS 兼容，Flutter 不会自动修复两者的冲突，参见 Web 嵌入与视图约束文档。

先确认实际裁剪发生在哪里

可以先做一个对照实验来定位问题：

1. 在浏览器开发者工具中记录宿主元素打开菜单前后的 getBoundingClientRect()。
2. 在当前视图内记录 MediaQuery.sizeOf(context)，确认 Flutter 获得的逻辑尺寸。
3. 临时给宿主设置足够大的明确宽高，移除祖先元素额外的裁剪样式，再观察菜单。

final size = MediaQuery.sizeOf(context);
debugPrint('Flutter view logical size: $size');

如果菜单能在扩大后的视图内完整显示，说明视图可用空间是主要限制。如果在足够大的视图内部仍出现异常裁剪，再排查局部 ClipRect、嵌套 Overlay、菜单定位及插件版本。

这个实验用于定位问题；正式方案仍可以保持原组件容器的尺寸不变。

方案一：为菜单建立独立的 Flutter 浮层视图

如果菜单外观也必须由 Flutter 统一实现，可以保留原来的小尺寸视图作为触发器，展开时将菜单面板渲染到另一个 FlutterView。新视图的宿主放在 document.body 下，使用 fixed 定位覆盖 React 内容。

交互流程可以这样设计：

1. Flutter 触发器通过 JS interop 通知 React 打开菜单。
2. React 获取触发区域的浏览器坐标，创建浮层宿主。
3. 使用已经初始化的 appInstance.addView() 添加菜单视图。
4. 选择结果通过共享 Dart 状态或 JS interop 回传。
5. 关闭菜单时调用 removeView()，再移除宿主元素。

下面只演示宿主创建与视图生命周期，需要在 appInstance 初始化后调用：

function mountFlutterPopup(appInstance, {
  left,
  top,
  width,
  height,
  initialData,
}) {
  const host = document.createElement("div");

  Object.assign(host.style, {
    position: "fixed",
    left: `${left}px`,
    top: `${top}px`,
    width: `${width}px`,
    height: `${height}px`,
    overflow: "hidden",
    zIndex: "1000",
  });

  document.body.appendChild(host);

  let viewId;
  try {
    viewId = appInstance.addView({
      hostElement: host,
      initialData,
    });
  } catch (error) {
    host.remove();
    throw error;
  }

  let closed = false;
  return function closePopup() {
    if (closed) return;
    closed = true;
    try {
      appInstance.removeView(viewId);
    } finally {
      host.remove();
    }
  };
}

这里没有传入宽松的 viewConstraints，以便让新视图使用菜单宿主的明确尺寸。left、top 应使用浏览器 viewport 坐标，width、height 应为经过边界计算的有效尺寸。z-index 示例值需要接入现有页面的层级约定。

Dart 侧也需要修改内容分发，增加一个专门渲染菜单面板的分支，例如 /popup。当前代码只识别 /dropdown 和 /text，直接传入 /popup 会显示 SizedBox.shrink()。

独立视图里应直接绘制选项列表，并同步选中状态。把 DropdownButton2 原样放进去只会得到另一个带自身 Overlay 的下拉按钮，无法自动接管原按钮已经打开的菜单。

浮层宿主还要为阴影预留空间，并处理滚动、窗口缩放、向上展开和靠近右侧边缘时的位置调整。跨 FlutterView 定位应显式传递坐标，不能依赖同一渲染树内的锚点关联。

方案二：由 React Portal 渲染菜单

如果 Web 端可以使用 DOM 菜单，React Portal 更容易接入现有页面的浮层管理。React 的 createPortal 文档 展示了如何将内容渲染到 document.body，以避开原父容器的裁剪。

下面演示渲染位置，展开状态、坐标和回调由调用方传入：

import { createPortal } from "react-dom";

function PopupOptions({ open, left, top, options, onSelect }) {
  if (!open) return null;

  return createPortal(
    <div
      style={{
        position: "fixed",
        left,
        top,
        zIndex: 1000,
        background: "white",
        border: "1px solid #ccc",
      }}
    >
      {options.map((option) => (
        <button
          key={option}
          type="button"
          style={{ display: "block", width: "100%" }}
          onClick={() => onSelect(option)}
        >
          {option}
        </button>
      ))}
    </div>,
    document.body,
  );
}

Flutter 侧仍需通过 JS interop 发送展开请求并接收选择结果。这个示例用 DOM 菜单替代原菜单，不会把已有 Flutter Overlay 转成 DOM 元素。正式使用时还需补齐键盘导航、焦点恢复、Escape 关闭及点击外部关闭。

如何选择？

如果采用覆盖整个 viewport 的透明 FlutterView，还必须处理它对下方 React 内容的鼠标、触摸和焦点影响。视觉透明不等于事件穿透；简单设置 pointer-events: none 又会使菜单无法交互。

另外，React 示例卸载时只删除了 script，没有移除 addView() 创建的视图。应保存各个 viewId，在组件卸载时调用 removeView()，同时防止异步初始化在卸载后继续添加视图。这个生命周期问题需要单独修正。

备注：内容仅供参考。