Flutter实现TextField随键盘弹出上移并恢复原位置的问题

你的需求是实现：TextField在键盘弹出时自动上移至键盘上方，收起时回到屏幕底部原位置。当前遇到的问题是：键盘弹出时TextField被遮挡，屏幕出现溢出（原位置为TextField位于屏幕底部，键盘弹出后布局超出屏幕范围）。以下是适配你场景的修复方案：

核心问题分析 #

原布局中用固定高度的SizedBox包裹消息列表，导致Column无法根据键盘弹出/收起的高度变化自适应调整，最终TextField被键盘遮挡并出现溢出。同时，ListView.builder的itemBuilder中嵌套ListView属于冗余布局，会引发滚动冲突和计算错误。

修复方案 #

关键修改 #

1. 移除消息列表外层的固定高度SizedBox，改用Expanded让列表自动填充Column的剩余空间
2. 删除ListView.builder中嵌套的ListView，直接返回消息内容组件
3. 保持resizeToAvoidBottomInset: true（Scaffold默认值，可省略），确保布局响应键盘高度变化

修改后的完整代码 #

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(
        'Chat',
        style: TextStyle(
            fontFamily: 'Chalet',
            fontWeight: FontWeight.w300,
            fontSize: widget.deviceWidth * 0.06),
      ),
    ),
    backgroundColor: whitePrimary,
    body: Column(
      children: [
        // 用Expanded替代固定高度SizedBox，自动填充剩余空间
        Expanded(
          child: ListView.builder(
              itemCount: _messages.length,
              itemBuilder: (BuildContext context, int index) {
                // 直接返回消息文本，移除嵌套的ListView
                return Padding(
                  padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
                  child: Text(_messages[index]),
                );
              }),
        ),
        const Divider(height: 1.0),
        _buildTextComposer()
      ],
    ),
  );
}

Widget _buildTextComposer() {
  return SizedBox(
    width: widget.deviceWidth,
    child: TextField(
      controller: _textFieldController,
      decoration: InputDecoration(
        border: InputBorder.none,
        focusedBorder: InputBorder.none,
        enabledBorder: InputBorder.none,
        errorBorder: InputBorder.none,
        disabledBorder: InputBorder.none,
        filled: true,
        fillColor: whitePrimary,
        suffixIcon: IconButton(
          icon: const Icon(
            Icons.send_rounded,
            color: orangePrimary,
          ),
          onPressed: () {},
        ),
        hintStyle: TextStyle(fontSize: widget.deviceWidth * 0.03),
        hintText: 'Write a message...',
      ),
    ),
  );
}

方案说明 #

• Expanded会让消息列表占据Column中除底部TextField和Divider之外的所有可用空间，当键盘弹出时，Column会自动收缩整体高度，带动TextField上移至键盘上方；键盘收起时，Column恢复原始高度，TextField回到底部原位置
• 移除嵌套的ListView后，滚动行为更流畅，布局计算更准确，避免了不必要的性能消耗
• 若需要更精细化的键盘布局控制，可以通过MediaQuery.of(context).viewInsets.bottom获取实时键盘高度，手动调整组件位置，但上述方案已能覆盖绝大多数聊天界面的需求

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