Firebase Firestore聊天App输入框触发列表上滑问题求助

问题描述 #

开发基于Firebase Firestore的聊天App时，使用firebase_ui_firestore ^1.5.15实现分页功能，分页本身正常，但存在两个异常表现：

• 首次进入聊天页面，消息列表能正常滚动到底部，符合预期；
• 点击输入框或发送消息时，列表会自动向上滚动，无法保持在底部，不符合常规聊天App的交互逻辑。

核心原因分析 #

1. 全局滚动触发时机错误：在build方法中添加WidgetsBinding.instance.addPostFrameCallback((_) => _scrollToBottom());，导致每次UI重建（比如输入框获取焦点触发重绘、发送消息后状态更新）都会执行滚动操作，结合GroupedListView的reverse: true配置，滚动逻辑与列表更新时序冲突，引发位置偏移。
2. 消息发送后滚动时机过早：发送消息后立即调用_scrollToBottom()，但Firestore数据同步存在延迟，此时列表还未加载新消息，滚动到的是旧的底部位置，后续新消息加载完成后，列表长度变化导致整体向上偏移。
3. 数据顺序处理冗余：Firestore查询已按TimeStamp降序排列，但GroupedListView设置了reverse: true和sort: false，数据顺序的重复反转处理可能导致列表布局重排时的滚动异常。

解决方案 #

1. 精准控制滚动触发时机 #

• 移除build方法中的全局滚动回调，仅在首次页面加载、Firestore数据快照更新、消息发送/删除完成并同步后触发滚动到底部操作。
• 确保滚动操作在列表数据完全更新后执行，避免时序冲突。

2. 优化滚动方法体验 #

用animateTo替代jumpTo，实现平滑滚动，同时确保获取最新的滚动范围。

3. 简化数据顺序处理 #

减少不必要的日期解析调用，优化GroupedListView的分组逻辑，避免重复的DateTime.parse操作。

代码修改示例 #

聊天页面核心修改 #

class _ChatAppState extends State<ChatApp> {
  final TextEditingController _messageController = TextEditingController();
  final ChatService _chatService = ChatService();
  bool isImageSelected = false;
  bool isSendingImage = false;
  final ScrollController _scrollController = ScrollController();
  final FocusNode _inputFocusNode = FocusNode(); // 新增输入框焦点监听
  XFile? image;

  @override
  void initState() {
    super.initState();
    // 首次加载完成后滚动到底部
    WidgetsBinding.instance.addPostFrameCallback((_) => _scrollToBottom());
    // 监听输入框焦点，键盘弹出后调整滚动位置
    _inputFocusNode.addListener(() {
      if (_inputFocusNode.hasFocus) {
        Future.delayed(const Duration(milliseconds: 300), () => _scrollToBottom());
      }
    });
  }

  @override
  void dispose() {
    _messageController.dispose();
    _scrollController.dispose();
    _inputFocusNode.dispose(); // 释放焦点节点
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // 移除全局的滚动回调，避免每次重绘都触发滚动
    return Scaffold(
      backgroundColor: ThemeManager.scaffoldBackgroundColor,
      body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          ChatScreenAppBar(
              senderName: widget.name, avatarUrl: widget.profileUrl),
          Expanded(child: _buildMessageList()),
          TextField(
            focusNode: _inputFocusNode, // 传入焦点节点
            onMessageSent: (text) async {
              // 等待消息发送完成并同步到Firestore后再滚动
              await sendMessage();
              _scrollToBottom();
            },
            onImageSelected: (selectedImage) async {}, 
            messageController: _messageController,
          ),
        ],
      ),
    );
  }

  /// 修改为异步方法，确保消息发送完成后再执行后续操作
  Future<void> sendMessage()async{
    try{
      if(_messageController.text.isNotEmpty)
      {
        await _chatService.sendMessage(widget.userId,
            widget.currentUserId,
            _messageController.text,'recieverEmail','text','gp-01');
        _messageController.clear();
      }else{
        log('its empty');
      }
    }catch(e)
    {
      log("send Error: ${e.toString()}");
    }
  }

  /// 优化滚动方法，使用平滑滚动替代瞬间跳转
  void _scrollToBottom() {
    if(_scrollController.hasClients)
    {
      _scrollController.animateTo(
        _scrollController.position.maxScrollExtent,
        duration: const Duration(milliseconds: 200),
        curve: Curves.easeOut,
      );
    }
  }

  Widget _buildMessageList() {
    List<String> ids = [widget.currentUserId, widget.userId];
    ids.sort();
    String chatRoomId = ids.join("_");
    return FirestoreQueryBuilder(
      pageSize: 5,
      query: FirebaseFirestore.instance
          .collection('chat_rooms')
          .doc(chatRoomId)
          .collection('messages')
          .orderBy('TimeStamp',descending: true),
      builder: (context, snapshot, index) {
        if (snapshot.hasError) {
          return Text('Error ${snapshot.error}');
        }
        if (snapshot.isFetching) {
          return const Center(child:  CircularProgressIndicator());
        }
        List<Message> allMessages = snapshot.docs.map((doc) {
          return Message.fromFireStore(doc);
        }).toList();

        // Firestore快照更新后，触发滚动到底部
        WidgetsBinding.instance.addPostFrameCallback((_) => _scrollToBottom());

        return GroupedListView<Message, DateTime>(
            controller: _scrollController,
            reverse: true,
            order: GroupedListOrder.ASC,
            floatingHeader: true,
            elements:allMessages.toList(),
            groupBy: (message) =>DateTime(
              message.timeStamp.toDate().year,
              message.timeStamp.toDate().month,
              message.timeStamp.toDate().day,
            ),
            itemComparator: (item1, item2) => item1.compareTo(item2),
            sort: false,
            groupHeaderBuilder: (Message message) {
              final formattedDate = formatMessageDate(message.timeStamp.toDate());
              return SizedBox(
                height: 40.h,
                child: Center(
                  child: Padding(
                    padding: const EdgeInsets.all(8),
                    child: Text(
                      formattedDate,
                      style: const TextStyle(color: ThemeManager.primaryBlack),
                    ),
                  ),
                ),
              );
            },
            itemBuilder: (context, Message message) {
              int messageIndex = allMessages.indexOf(message);
              final hasEndReached = snapshot.hasMore &&
                  messageIndex + 1 == snapshot.docs.length &&
                  !snapshot.isFetchingMore;
              if(hasEndReached) {
                snapshot.fetchMore();
              }
              String messageId = snapshot.docs[messageIndex].id;
              return Align(
                alignment: message.receiverId == widget.userId
                    ? Alignment.centerRight : Alignment.centerLeft,
                child: Padding(
                  padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 5.h),
                  child: Column(
                    children: [
                      message.receiverId == widget.userId ? Dismissible(
                        key: UniqueKey(),
                        confirmDismiss: (direction) async {
                          bool shouldDelete = await Dialogs.showDeleteConfirmationDialog(context);
                          return shouldDelete;
                        },
                        onDismissed: (direction) async{
                          await _chatService.deleteMessage(widget.currentUserId, widget.userId, messageId);
                          // 删除消息后调整滚动位置
                          _scrollToBottom();
                        },
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.end,
                          children: [
                            TextMessageContainer(message: message,
                              senderId: widget.currentUserId,
                              receiverId:widget.userId,),
                            SizedBox(height: 5.h),
                            Text(
                              DateFormat("hh:mm a").format(message.timeStamp.toDate()),
                              style: TextStyle(
                                fontSize: 12.sp,
                                fontWeight: FontWeight.w400,
                                color: ThemeManager.secondaryBlack,
                              ),
                            ),
                          ],
                        ),
                      ):Column(
                        crossAxisAlignment: CrossAxisAlignment.end,
                        children: [
                          TextMessageContainer(message: message,
                            senderId: widget.currentUserId,
                            receiverId:widget.userId,),
                          SizedBox(height: 5.h),
                          Text(
                            DateFormat("hh:mm a").format(message.timeStamp.toDate()),
                            style: TextStyle(
                              fontSize: 12.sp,
                              fontWeight: FontWeight.w400,
                              color: ThemeManager.secondaryBlack,
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
              );
            }
        );
      },
    );
  }

  /// 优化日期格式化，避免重复解析DateTime
  String formatMessageDate(DateTime dateTime) {
    final now = DateTime.now();
    final yesterday = now.subtract(const Duration(days: 1));

    if (dateTime.year == now.year &&
        dateTime.month == now.month &&
        dateTime.day == now.day) {
      return "Today";
    } else if (dateTime.year == yesterday.year &&
        dateTime.month == yesterday.month &&
        dateTime.day == yesterday.day) {
      return "Yesterday";
    } else {
      return DateFormat.yMMMd().format(dateTime);
    }
  }
}

自定义输入框无需额外修改，只需确保接收传入的focusNode即可 #

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