Flutter键盘弹出时如何仅TextField上移 其余Scaffold组件不resize

核心思路 #

将Scaffold的resizeToAvoidBottomInset设为false，从根源上禁止键盘弹出时全局组件resize挤压直播画面，再通过框架层提供的同步接口获取实时键盘高度，仅对输入框做向上偏移，其余组件始终保持全屏布局不受影响。

具体实现 #

直接用如下代码替换原有布局即可：

Scaffold(
  resizeToAvoidBottomInset: false,
  body: Stack(
    alignment: Alignment.bottomCenter,
    children: [
      // 直播播放层：固定撑满全屏，键盘弹出时不会变形/缩放
      Positioned.fill(
        child: BroadcastScreen(),
      ),
      // 其余业务组件（弹幕、功能按钮等）正常放置在此处，不会被键盘布局影响
      // 输入框组件：单独适配键盘高度
      Builder(
        builder: (context) {
          // 从组件树获取实时、帧同步的键盘高度，全机型兼容无延迟
          final bottomInset = MediaQuery.of(context).viewInsets.bottom;
          return Padding(
            padding: EdgeInsets.only(bottom: bottomInset),
            child: TextField(
              // 输入框样式按需配置
              decoration: InputDecoration(
                filled: true,
                fillColor: Colors.white,
                hintText: '发送评论',
              ),
            ),
          );
        },
      ),
    ],
  ),
)

方案优势 #

• 无布局挤压：直播层始终撑满全屏，键盘弹出时不会出现压缩变形
• 无手势冲突：没有额外嵌套冗余Scaffold，直播层、功能按钮的所有点击/滑动手势都可以正常响应
• 无兼容性问题：通过MediaQuery.of(context)获取的viewInsets.bottom是Flutter框架在每帧构建前统一校准的数值，和系统键盘弹出动画完全同步，不存在手动读取window属性带来的延迟、空值问题，适配所有Android/iOS机型

历史尝试方案的问题说明 #

• 嵌套透明Scaffold：多Scaffold嵌套会各自维护独立的手势识别域，上层透明Scaffold会默认拦截所有穿透手势，属于天生设计缺陷，无法从根本上解决冲突
• 手动读取WidgetsBinding.instance.window.viewInsets：该方式获取的是原生层直接回调的原始值，没有和Flutter渲染帧做同步对齐，所以会出现明显延迟，部分机型原生回调时序异常时就会返回空值，属于数据源选择错误。

如果需要输入框和键盘弹出的动效完全对齐，只需要把普通Padding替换为AnimatedPadding即可，不需要额外写动画控制器：

AnimatedPadding(
  padding: EdgeInsets.only(bottom: bottomInset),
  duration: Duration.zero,
  curve: Curves.linear,
  child: TextField(/* 同上配置 */),
)

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