Flutter 软键盘弹出遮挡TextField输入框问题排查与解决

问题描述 #

开发Flutter页面时遇到稳定复现的异常：点击TextField输入框唤起软键盘时，弹出的键盘会直接遮挡输入框区域。
已尝试多种主流解决方案均未生效，已尝试方案如下：

• 设置Scaffold的resizeToAvoidBottomInset: true
• 布局外层嵌套SingleChildScrollView组件
• 为输入框外层容器添加padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom)适配键盘高度
  对应问题代码如下：

Scaffold(
    resizeToAvoidBottomInset: true,
    appBar: AppBar(),
    body: Padding(
      padding: EdgeInsets.fromLTRB(8.w, 8.h, 8.w, 8.h),
      child: SingleChildScrollView(
          child: Column(
              childern: [
                // 省略其他业务组件
                Container(
                  padding: EdgeInsets.only(
                      bottom: MediaQuery.of(context)
                          .viewInsets
                          .bottom),
                  child: textField()
                )
                // 省略其他业务组件
              ]
          ),
      ),
    ),
)

解决方案 #

问题根因为引入flutter_screenutil实现多尺寸屏幕响应式适配时，在MaterialApp中错误配置了useInheritedMediaQuery: true属性，移除该配置项后，键盘遮挡输入框的问题完全解决。
常规键盘适配方案全部失效时，可优先检查全局MediaQuery相关配置、第三方屏幕适配库的初始化参数是否存在异常配置。

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