Flutter键盘弹出时ListView自动上移并显示底部最后条目的问题

核心问题原因 #

当前代码出现键盘遮挡列表的核心原因有两个：

• 外层Center组件破坏了Column的垂直布局约束，导致键盘弹出时布局无法正确自适应
• 缺少列表滚动控制逻辑，无法在键盘弹出、新消息发送时自动定位到最新消息位置

修复步骤 #

• 移除MyBody中最外层的Center包裹组件，避免干扰垂直方向布局计算
• 为Scaffold显式设置resizeToAvoidBottomInset: true，开启主体内容随键盘高度自动调整的特性
• 新增列表滚动控制器，在新消息发送后自动滚动到列表底部，保证最新消息始终可见
• 正确释放控制器资源，避免内存泄漏

修复后完整代码 #

import 'package:flutter/material.dart';
class HomeScreen extends StatefulWidget {
  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  late TextEditingController txtnote;
  late ScrollController _scrollController;
  List<String> notelist = ['A','B','C','D','E','F','G','H','I','J','K'];

  @override
  void initState() {
    super.initState();
    txtnote = TextEditingController();
    _scrollController = ScrollController();
  }

  // 滚动到列表底部方法
  void _scrollToBottom() {
    WidgetsBinding.instance.addPostFrameCallback((_) {
      if (_scrollController.hasClients) {
        _scrollController.jumpTo(_scrollController.position.maxScrollExtent);
      }
    });
  }

  @override
  void dispose() {
    txtnote.dispose();
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 开启键盘弹出时内容自适应
      resizeToAvoidBottomInset: true,
      appBar: AppBar(title: Text('Notes Example'),),
      body: MyBody(),
    );
  }

  Widget MyBody() {
    return Padding(
      padding: const EdgeInsets.all(20.0),
      child: Column(
        children: [
          Expanded(
            child: ListView.builder(
              // 绑定滚动控制器
              controller: _scrollController,
              itemCount: notelist.length,
              itemBuilder: (context,index){
                return Card(
                  color: Colors.blue,
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
                  child: ListTile(
                    title: Text(notelist[index]),
                    leading: CircleAvatar(
                      radius: 30.0,
                      child: Text(notelist[index][0]),
                    ),
                    trailing: Icon(Icons.delete),
                  ),
                );
              }
            ),
          ),
          TextField(
            controller: txtnote,
            onSubmitted: (value){
              setState(() {
                notelist.add(value);
              });
              // 发送新消息后滚动到底部
              _scrollToBottom();
              txtnote.clear();
            },
          ),
        ],
      ),
    );
  }
}

效果说明 #

修改完成后，键盘弹出时整个布局会自动随键盘高度上移，输入框始终贴在键盘顶部，新消息发送后列表会自动滚动到底部，完全实现WhatsApp聊天页的交互效果。

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