Flutter聊天应用键盘遮挡页面，无法滚动至末尾问题求助

一、重构布局结构 #

原布局嵌套三层ListView+Stack的结构会导致滚动冲突和高度计算错误，改用Column作为主体布局，将消息列表放入Expanded中，输入框固定在底部：

body: GestureDetector(
  onTap: () {
    FocusManager.instance.primaryFocus?.unfocus();
  },
  child: Column(
    children: [
      // 消息列表区域
      Expanded(
        child: Container(
          margin: EdgeInsets.all(10),
          child: StreamBuilder(
            stream: StreamFunction(),
            builder: (context, snapshot) {
              return ListView.builder(
                reverse: true, // 新消息从底部显示
                controller: _controller,
                itemCount: messaging?.length ?? 0,
                itemBuilder: (context, i) {
                  if (messaging == null || messaging!.isEmpty) {
                    return Container();
                  }
                  final message = messaging![i];
                  final isMyMessage = "${message["from"]}" == "${snapshot.data}";
                  return isMyMessage
                      ? MyMessage("${message["message"]}", "${message["timeNow"]}")
                      : OtherMessage("${message["message"]}", "${message["timeNow"]}");
                },
              );
            },
          ),
        ),
      ),
      // 输入框区域
      Container(
        margin: EdgeInsets.symmetric(horizontal: 10),
        height: 50,
        width: double.infinity,
        color: Colors.white,
        child: Row(
          children: <Widget>[
            GestureDetector(
              onTap: () {},
              child: Container(
                height: 30,
                width: 30,
                decoration: BoxDecoration(
                  color: Colors.orange,
                  borderRadius: BorderRadius.circular(30),
                ),
                child: Icon(
                  Icons.add,
                  color: Colors.white,
                  size: 20,
                ),
              ),
            ),
            SizedBox(width: 15),
            Expanded(
              child: TextField(
                maxLines: null,
                controller: msg,
                decoration: InputDecoration(
                  hintText: "Write message...",
                  hintStyle: TextStyle(color: Colors.black54),
                  border: InputBorder.none,
                ),
              ),
            ),
            SizedBox(width: 15),
            FloatingActionButton(
              mini: true,
              onPressed: () {
                if (msg.text.isNotEmpty) {
                  sendMsg(msg.text, '$friendName');
                  msg.clear();
                  // 发送后自动滚动到底部
                  _controller.jumpTo(_controller.position.minScrollExtent);
                }
              },
              child: Icon(
                Icons.send,
                color: Colors.white,
                size: 18,
              ),
              backgroundColor: Colors.orange,
              elevation: 0,
            ),
          ],
        ),
      ),
    ],
  ),
)

二、解决键盘遮挡问题 #

1. 确保Scaffold开启自动适配键盘：
   在Scaffold中设置resizeToAvoidBottomInset: true（默认值为true，若之前修改过需恢复），页面会自动上移避开键盘。
2. 发送消息后主动滚动到底部：
   在sendMsg调用后，通过_controller.jumpTo(_controller.position.minScrollExtent)（因设置了reverse: true，minScrollExtent对应列表底部）确保最新消息可见。

三、优化原代码的其他问题 #

• 移除多余的shrinkWrap：ListView.builder在Expanded中无需设置shrinkWrap，避免不必要的高度计算损耗性能。
• 修正空值判断逻辑：将原代码中逻辑错误的messaging!.isNotEmpty || messaging != null改为先判断messaging不为null，再判断是否为空。
• 删除无用的Align组件：输入框的Row无需额外包裹Align，Row自身可处理布局对齐。

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