Flutter中实现键盘弹出时TextField自动滚动的问题

核心修复方案： #

• 不要设置resizeToAvoidBottomInset: false：该属性设为false会阻止Scaffold自动调整布局避开键盘，反而会加重遮挡，保持默认的true即可。
• 给SingleChildScrollView添加滚动物理与适配padding：确保滚动功能正常，同时适配键盘弹出后的底部空间。
• 校验第三方尺寸工具初始化：如果使用了flutter_screenutil这类插件（代码中的.h后缀），需确保已在项目入口完成全局初始化，避免尺寸计算异常。

修改后的完整代码： #

Scaffold(
  body: SafeArea(
    child: Padding(
      padding: const EdgeInsets.symmetric(horizontal: 40),
      child: _loading
          ? const Center(child: CircularProgressIndicator())
          : SingleChildScrollView(
              // 强制启用滚动物理，即使内容高度不足也能响应滚动
              physics: const AlwaysScrollableScrollPhysics(),
              // 自动适配键盘高度，避免底部内容被遮挡
              padding: EdgeInsets.only(
                bottom: MediaQuery.of(context).viewInsets.bottom,
              ),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  SizedBox(height: 120.h),
                  Image.asset(
                    "assets/splash.png",
                    width: MediaQuery.of(context).size.width / 2.2,
                  ),
                  SizedBox(height: 60.h),
                  TextField(
                    controller: _name,
                    decoration: const InputDecoration(labelText: 'User Name'),
                  ),
                  SizedBox(height: 15.h),
                  TextField(
                    controller: _password,
                    decoration: const InputDecoration(labelText: 'Password'),
                  ),
                  SizedBox(height: 45.h),
                  GestureDetector(
                    onTap: () {
                      check();
                    },
                    child: Container(
                      width: fullWidth(context),
                      padding: const EdgeInsets.symmetric(vertical: 10),
                      decoration: BoxDecoration(
                        color: AppColor.mainThemeColor,
                        borderRadius: BorderRadius.circular(5),
                      ),
                      child: const Center(
                        child: Text(
                          "Login",
                          style: TextStyle(
                            color: Colors.white,
                            fontWeight: FontWeight.w500,
                          ),
                        ),
                      ),
                    ),
                  ),
                  // 底部占位，避免登录按钮被键盘顶到屏幕边缘
                  SizedBox(height: 20.h),
                ],
              ),
            ),
    ),
  ),
);

额外排查点： #

如果问题仍未解决，检查以下内容：

• 确认flutter_screenutil已在入口初始化：

  void main() async {
    await ScreenUtil.ensureScreenSize();
    runApp(const MyApp());
  }
  

• 尝试临时移除SafeArea，测试是否是该组件导致的布局约束异常。

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