Flutter如何防止键盘弹出时底部TextField上移遮挡ListView

软键盘唤起弹出时，页面底部的TextField输入组件被向上顶起，遮挡上方ListView列表组件的展示内容，交互效果如下：

当前页面实现代码：

body: Column(children: [
  Expanded(
    child: ListView.builder(
      controller: _scrollController,
      itemCount: messages.length,
      shrinkWrap: true,
      padding: const EdgeInsets.only(top: 10, bottom: 10),
      itemBuilder: (context, index) {
        return MessageBubble(
          message: messages[index]['message'],
          isCurrentUser: messages[index]['type'] == 'user',
        );
      },
    ),
  ),
  // 聊天输入底栏
  Container(
    padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
    color: Colors.white,
    child: Row(
      children: [
        Expanded(
          child: TextField(
            controller: _messageController,
            decoration: const InputDecoration(
              hintText: "输入消息...",
              border: InputBorder.none,
            ),
          ),
        ),
        const SizedBox(width: 15),
        FloatingActionButton.small(
          onPressed: onMessageSent,
          child: const Icon(Icons.send),
        ),
      ],
    ),
  ),
]),

按以下步骤调整即可解决遮挡问题：

• 保留Scaffold的resizeToAvoidBottomInset默认值true，不要设置为false。该属性默认会自动计算软键盘占用高度，调整页面内部布局避让，设为false会直接导致输入栏被软键盘完全覆盖。
• 移除ListView上的shrinkWrap: true配置。当前ListView已经被Expanded包裹，会自动占满Column剩余可用空间，开启shrinkWrap会强制ListView根据子组件总高度计算自身尺寸，不仅会一次性加载所有列表项造成性能损耗，还会导致布局高度计算异常，出现内容被挤压遮挡的问题。
• 新增列表自动滚动到底部逻辑。在State类中添加滚动方法，在键盘弹出、新消息发送后主动触发列表滚动到最底部，保证最新内容始终可见：

  void _scrollToBottom() {
    // 等待布局计算完成再滚动，避免位置计算错误
    if (_scrollController.hasClients) {
      Future.delayed(const Duration(milliseconds: 100), () {
        _scrollController.animateTo(
          _scrollController.position.maxScrollExtent,
          duration: const Duration(milliseconds: 200),
          curve: Curves.easeOut,
        );
      });
    }
  }
  

  触发时机：
  • 监听MediaQuery.of(context).viewInsets.bottom变化，当数值大于0即软键盘弹出时，调用_scrollToBottom()
  • 在onMessageSent方法中，新消息插入列表、setState刷新后，调用_scrollToBottom()
• （可选）适配安全区。如果需要兼容沉浸式导航栏场景，给底部输入容器的padding加上系统边距与键盘高度偏移，保证输入栏始终贴合软键盘顶部，不会被系统控件遮挡：

  Container(
    padding: EdgeInsets.only(
      left: 8,
      right: 8,
      top: 8,
      // 叠加键盘高度、系统底部安全区高度
      bottom: 8 + MediaQuery.of(context).viewInsets.bottom + MediaQuery.of(context).padding.bottom
    ),
    color: Colors.white,
    // 其余子组件配置保持不变
  )
  

调整完成后，软键盘弹出时输入栏会自动贴合键盘上沿，列表自动滚动到最新消息位置，不会再出现内容遮挡的情况，交互和主流即时通讯应用一致。

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