Flutter聊天页面键盘遮挡TextField问题求助

开发者阿泽

2026-7-18

Flutter聊天页面键盘遮挡输入框的修复方案

你的问题根源在于给Scaffold的body外层Container设置了height: Get.height，强制布局高度固定为屏幕总高度，导致resizeToAvoidBottomInset: true无法正常调整布局避开键盘。以下是具体修复步骤：

1. 移除固定高度限制

删除body中Container的height: Get.height和width: Get.width属性——Scaffold的body默认会填充整个可用空间，手动设置固定高度会阻止布局响应键盘弹出时的高度变化。

修改后的代码片段：

body: Container(
  padding: EdgeInsets.symmetric(
    horizontal: 17.0.w,
  ),
  child: Column(
    mainAxisSize: MainAxisSize.max,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      // 原有组件内容保持不变
    ],
  ),
),

2. 优化输入框焦点时的滚动行为（可选）

为了确保键盘弹出时消息列表自动滚动到底部，在输入框的onTap回调中添加滚动逻辑：

CustomTextFromField(
  // 原有属性...
  onTap: () {
    WidgetsBinding.instance.addPostFrameCallback((_) {
      scrollController.jumpTo(scrollController.position.maxScrollExtent);
    });
  },
),

3. 适配键盘底部内边距（针对特殊场景）

如果部分机型仍有遮挡问题，可通过MediaQuery动态给输入框添加底部内边距，直接避开键盘区域：

// 替换原有输入框所在的Row外层包裹
return Padding(
  padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    crossAxisAlignment: CrossAxisAlignment.end,
    children: [
      // 原有输入框相关组件
    ],
  ),
);