Flutter插入的Overlay被软键盘遮挡问题求助

要让你的Overlay组件像Telegram那样显示在软键盘上方，核心是让Overlay内容自动避开软键盘占据的区域，以下是具体调整方案：

1. 利用MediaQuery获取键盘偏移量 #

在OverlayEntry的builder中，通过MediaQuery.of(context).viewInsets获取软键盘的高度（viewInsets.bottom），通过Padding或Positioned将内容向上偏移对应距离，避免被键盘遮挡。

2. 监听键盘变化并刷新Overlay #

当键盘弹出/收起时，viewInsets会更新，需要调用overlayEntry.markNeedsBuild()触发Overlay重建，确保位置实时调整。

修改后的代码示例 #

// Remove the OverlayEntry.
void removeHighlightOverlay() {
  if(overlayEntry != null){
    overlayEntry?.remove();
    overlayEntry = null;
  }
}

void createHighlightOverlay() {
  // Remove the existing OverlayEntry.
  removeHighlightOverlay();
  assert(overlayEntry == null);

  overlayEntry = OverlayEntry(
    builder: (BuildContext context) {
      // 获取当前键盘高度
      final keyboardHeight = MediaQuery.of(context).viewInsets.bottom;
      
      return GestureDetector(
        onTap: (){
          removeHighlightOverlay();
        },
        child: Builder(
          builder: (BuildContext context) {
            // 通过Padding将整体内容上移，避开键盘区域
            return Padding(
              padding: EdgeInsets.only(bottom: keyboardHeight),
              child: Container(
                color: Colors.black54,
                child: FocusedMenuDetails(
                  menuContent: widget.menuContent,
                  child: widget.child,
                  childOffset: childOffset,
                  childSize: childSize!,
                  parentSize: parentSize!,
                  parentOffset: parentOffset,
                ),
              ),
            );
          },
        ),
      );
    },
  );

  // 添加到Overlay
  Overlay.of(context, debugRequiredFor: widget).insert(overlayEntry!);
  
  // 监听键盘状态变化，触发Overlay重建
  WidgetsBinding.instance.addPostFrameCallback((_) {
    final observer = _KeyboardOverlayObserver(overlayEntry!);
    WidgetsBinding.instance.addObserver(observer);
    // 移除Overlay时同步移除监听，避免内存泄漏
    overlayEntry!.disposeCallback = () => WidgetsBinding.instance.removeObserver(observer);
  });
}

// 自定义观察者类，监听键盘尺寸变化
class _KeyboardOverlayObserver extends WidgetsBindingObserver {
  final OverlayEntry overlayEntry;

  _KeyboardOverlayObserver(this.overlayEntry);

  @override
  void didChangeMetrics() {
    super.didChangeMetrics();
    // 键盘状态变化时强制刷新Overlay布局
    overlayEntry.markNeedsBuild();
  }
}

额外注意点 #

• 如果FocusedMenuDetails本身是定位组件（比如用Positioned），可以直接调整其底部定位值为keyboardHeight，无需给外层Container加padding。
• 务必在移除Overlay时同步移除WidgetsBindingObserver，防止内存泄漏。
• 若需要更精准的菜单定位，可以结合MediaQuery.of(context).size和键盘高度，动态计算菜单的显示位置（比如让菜单刚好贴合键盘顶部）。

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