Flutter中OverlayEntry被键盘遮挡，如何使其显示在键盘上方？

我开发了一个自定义Widget，点击后会在其下方弹出包含搜索栏与列表的OverlayEntry。但点击Overlay内的TextField时，屏幕上移幅度不足，导致TextField及列表项被键盘遮挡。已尝试通过MediaQuery.of(context).viewInsets.bottom设置底部内边距，但问题仍未解决。

解决方案 #

方案1：给Overlay内容套一层Scaffold #

OverlayEntry默认不继承外层Scaffold的键盘适配逻辑，直接把弹窗内容放进独立的Scaffold里，利用它自带的resizeToAvoidBottomInset属性自动处理键盘遮挡：

OverlayEntry _createOverlayEntry() {
  return OverlayEntry(
    builder: (context) => Positioned(
      left: 0,
      right: 0,
      top: 100, // 自定义你的弹窗顶部定位
      child: Scaffold(
        backgroundColor: Colors.transparent, // 保持背景透明，不遮挡底层内容
        resizeToAvoidBottomInset: true, // 开启键盘自动适配
        body: Column(
          children: [
            TextField(decoration: InputDecoration(hintText: '输入搜索内容')),
            Expanded(
              child: ListView.builder(
                itemCount: 20,
                itemBuilder: (_, index) => ListTile(title: Text('列表项$index')),
              ),
            ),
          ],
        ),
      ),
    ),
  );
}

方案2：手动监听键盘高度动态调整弹窗位置 #

通过监听系统键盘的内边距变化，实时更新OverlayEntry的底部偏移量：

OverlayEntry? _overlayEntry;
double _keyboardHeight = 0;

@override
void initState() {
  super.initState();
  // 持续监听键盘高度变化
  WidgetsBinding.instance.addPersistentFrameCallback((_) {
    final currentHeight = WidgetsBinding.instance.window.viewInsets.bottom;
    if (currentHeight != _keyboardHeight) {
      _keyboardHeight = currentHeight;
      _overlayEntry?.markNeedsBuild(); // 触发Overlay重绘
    }
  });
}

OverlayEntry _createOverlayEntry() {
  return OverlayEntry(
    builder: (context) => Positioned(
      left: 0,
      right: 0,
      top: 100,
      bottom: _keyboardHeight, // 动态设置底部偏移，避开键盘
      child: Container(
        color: Colors.white,
        child: Column(
          children: [
            TextField(decoration: InputDecoration(hintText: '输入搜索内容')),
            Expanded(
              child: ListView.builder(
                itemCount: 20,
                itemBuilder: (_, index) => ListTile(title: Text('列表项$index')),
              ),
            ),
          ],
        ),
      ),
    ),
  );
}

方案3：用SingleChildScrollView+MediaQuery组合 #

如果不想用Scaffold，就把弹窗内容放进可滚动容器里，配合MediaQuery的底部内边距确保内容不被遮挡：

OverlayEntry _createOverlayEntry() {
  return OverlayEntry(
    builder: (context) => Positioned(
      left: 0,
      right: 0,
      top: 100,
      child: Container(
        color: Colors.white,
        child: Padding(
          padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
          child: SingleChildScrollView(
            child: Column(
              children: [
                TextField(decoration: InputDecoration(hintText: '输入搜索内容')),
                ...List.generate(20, (index) => ListTile(title: Text('列表项$index'))),
              ],
            ),
          ),
        ),
      ),
    ),
  );
}

内容的提问来源于stack exchange，提问作者Md. Kamrul Amin