Flutter聊天应用TextField键盘弹出时占用额外空间问题求解决方案

以下是几种无需使用双重Scaffold的实用解决方案：

方案1：手动利用MediaQuery调整输入栏底部内边距 #

将Scaffold的resizeToAvoidBottomInset设为false，通过MediaQuery获取键盘高度，手动给底部输入栏添加底部内边距，既避免输入栏被键盘遮挡，也能防止额外空间占用：

Scaffold(
  resizeToAvoidBottomInset: false,
  body: Column(
    children: [
      // 聊天消息列表，用Expanded占满剩余空间
      Expanded(
        child: ListView.builder(
          itemCount: messages.length,
          itemBuilder: (context, index) => MessageItem(message: messages[index]),
        ),
      ),
      // 底部输入栏
      Padding(
        padding: EdgeInsets.only(
          bottom: MediaQuery.of(context).viewInsets.bottom,
          left: 16,
          right: 16,
          top: 8,
        ),
        child: Row(
          children: [
            Expanded(child: TextField(decoration: InputDecoration(hintText: "输入消息"))),
            SizedBox(width: 8),
            ElevatedButton(onPressed: () {}, child: Text("发送")),
          ],
        ),
      ),
    ],
  ),
)

方案2：用AnimatedPadding实现平滑过渡 #

如果想要输入栏在键盘弹出/收起时有自然的动画效果，把上面的Padding替换为AnimatedPadding，动画时长和键盘弹出的默认时长保持一致：

AnimatedPadding(
  duration: Duration(milliseconds: 200),
  padding: EdgeInsets.only(
    bottom: MediaQuery.of(context).viewInsets.bottom,
    left: 16,
    right: 16,
    top: 8,
  ),
  child: Row(
    children: [
      Expanded(child: TextField(decoration: InputDecoration(hintText: "输入消息"))),
      SizedBox(width: 8),
      ElevatedButton(onPressed: () {}, child: Text("发送")),
    ],
  ),
)

方案3：使用LayoutBuilder动态适配布局 #

通过LayoutBuilder获取父组件的可用高度，结合键盘高度计算输入栏位置，彻底避免布局偏移问题：

Scaffold(
  resizeToAvoidBottomInset: false,
  body: LayoutBuilder(
    builder: (context, constraints) {
      final keyboardHeight = MediaQuery.of(context).viewInsets.bottom;
      return Column(
        children: [
          Expanded(
            child: ListView.builder(
              itemCount: messages.length,
              itemBuilder: (context, index) => MessageItem(message: messages[index]),
            ),
          ),
          Container(
            height: 60, // 输入栏固定高度
            padding: EdgeInsets.only(bottom: keyboardHeight),
            child: Row(
              children: [
                Expanded(child: TextField(decoration: InputDecoration(hintText: "输入消息"))),
                SizedBox(width: 8),
                ElevatedButton(onPressed: () {}, child: Text("发送")),
              ],
            ),
          ),
        ],
      );
    },
  ),
)

额外注意事项 #

• 务必用Expanded包裹聊天消息列表，这样键盘弹出时列表会自动压缩，不会让输入栏占用额外空间。
• 如果输入栏支持多行输入，可结合TextField的maxLines、minLines属性，搭配ScrollController避免布局溢出。

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