modalBottomSheet被键盘遮挡问题：为何Scaffold调整不影响它？

这问题其实挺常见的，我来给你拆解下原因和解决方案～

核心原因：ModalBottomSheet的独立性 #

你提到Scaffold本身会通过resizeToAvoidBottomInset调整body尺寸，但modalBottomSheet并不属于当前Scaffold的一部分，这是关键：

• 层级不同：ModalBottomSheet是Flutter Overlay层的独立弹窗，它的渲染上下文和外层Scaffold完全分离，Scaffold的resize逻辑只会作用于自己的body区域，管不到弹窗。
• MediaQuery上下文隔离：modalBottomSheet的builder回调里的context是新创建的上下文，它的MediaQueryData是基于弹窗自身的，不会继承外层Scaffold的配置，所以键盘弹出时，弹窗不会自动感知并调整位置。

而且resizeToAvoidBottomInset是Scaffold的属性，对modalBottomSheet本身无效，因为弹窗不是Scaffold的子组件。

实用解决方案 #

给你几个靠谱的解决办法，按需选择：

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

既然Scaffold能处理键盘适配，那直接在弹窗内部嵌套一个Scaffold就行，它会自动帮你处理resize逻辑：

class ShowSheet extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: true, // 默认就是true，可显式声明
      body: Container(
        height: 200,
        child: TextField(
          autofocus: true,
        ),
      ),
    );
  }
}

方案2：手动添加底部padding #

通过MediaQuery获取键盘高度，给弹窗容器添加底部padding，手动腾出空间：

class ShowSheet extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      // 根据键盘高度动态调整底部padding
      padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
      child: TextField(
        autofocus: true,
      ),
    );
  }
}

方案3：使用可滚动的弹窗 #

如果弹窗内容比较长，开启isScrollControlled让弹窗占满屏幕，结合滚动组件来适配：

// 调用showModalBottomSheet时添加参数
showModalBottomSheet(
  context: context,
  isScrollControlled: true, // 允许弹窗占满屏幕
  builder: (context) => ShowSheet()
);

// 弹窗组件修改为可滚动结构
class ShowSheet extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
      child: Container(
        height: 200,
        child: TextField(
          autofocus: true,
        ),
      ),
    );
  }
}

总结 #

本质上就是modalBottomSheet和外层Scaffold是独立的两个组件，所以没法直接复用Scaffold的resize逻辑，通过上面几种方式，要么让弹窗自己带Scaffold处理，要么手动适配键盘高度，就能解决TextField被键盘覆盖的问题啦～

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