Flutter使用SingleChildScrollView仍出现键盘遮挡TextFormField问题

问题核心原因 #

仅在Scaffold的body中嵌套SingleChildScrollView但未做配套配置时，会出现两类问题导致遮挡：

• 若Scaffold的resizeToAvoidBottomInset被手动设置为false，软键盘弹出时页面不会自动压缩布局高度，滚动视图没有足够空间滚动到输入框位置
• SingleChildScrollView未预留足够的底部安全边距，也未做布局约束，滚动计算逻辑异常，无法自动将获焦输入框滚动到可视区域

修复步骤 #

• 确认Scaffold的resizeToAvoidBottomInset属性保持为true（该属性默认值为true，若之前手动修改为false请改回），确保软键盘弹出时Scaffold会自动调整内部布局高度，避开键盘遮挡区域
• 给SingleChildScrollView配置适配边距，底部边距叠加软键盘高度，避免内容紧贴软键盘；同时通过ConstrainedBox给滚动内容设置最小高度约束，避免滚动布局计算异常
• 不要在Scaffold外层嵌套固定高度的容器类组件，避免拦截Scaffold的布局调整事件

正确实现代码 #

@override
Widget build(BuildContext context) {
  final mediaQuery = MediaQuery.of(context);
  return Scaffold(
    backgroundColor: Colors.white,
    // 核心配置：允许键盘弹出时自动调整Scaffold布局
    resizeToAvoidBottomInset: true,
    body: SingleChildScrollView(
      // 配置内边距，底部预留键盘高度+20px额外间距
      padding: EdgeInsets.fromLTRB(16, 20, 16, mediaQuery.viewInsets.bottom + 20),
      child: ConstrainedBox(
        // 约束内容最小高度为屏幕可用高度，避免滚动布局异常
        constraints: BoxConstraints(
          minHeight: mediaQuery.size.height - mediaQuery.padding.top - mediaQuery.padding.bottom,
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 其余页面组件按需求放置
            const Text("页面标题", style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold)),
            const SizedBox(height: 30),
            // 输入框组件
            TextFormField(
              decoration: const InputDecoration(
                hintText: "请输入内容",
                border: OutlineInputBorder(),
              ),
            ),
            // 其余页面组件...
          ],
        ),
      ),
    ),
  );
}

进阶优化 #

如果页面存在多个输入框，需要更精准的滚动控制，可以给SingleChildScrollView绑定ScrollController，给每个输入框绑定对应的FocusNode，监听输入框获焦事件，通过控制器主动滚动到输入框所在位置即可。

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