Flutter List UI 未正确更新

Question

我正在使用 Flutter 和 firebase 构建一个一对一的聊天应用程序，我想在它发生的那一天的标签下显示所有聊天，就像在所有主要的聊天应用程序上一样。

我按照NiklasLehnfeld 的建议，在每条消息的时间戳字段上使用 order by 命令，按时间升序从 firestore 检索数据 我使用集合包中的 groupBy 方法对我的消息进行分组，并使用嵌套列表视图构建器，外部用于创建组，内部用于向这些组填充数据。

这里是代码

  Widget build(BuildContext context) {
    return FutureBuilder(
      future: FirebaseAuth.instance.currentUser(),
      builder: (ctx, futureSnapshot) {
        if (futureSnapshot.connectionState == ConnectionState.waiting) return Center(child: CupertinoActivityIndicator());
        return StreamBuilder(
          stream: Firestore.instance
              .collection('mychats/${futureSnapshot.data.uid}/${widget.recieverUid}')
              .orderBy('createdAt', descending: true)
              .snapshots(),
          builder: (context, chatSnapshots) {
            if (chatSnapshots.connectionState == ConnectionState.waiting)
              return Center(child: CupertinoActivityIndicator());
            else {
              final List chatDocs = chatSnapshots.data.documents;

              Map<String, List> grouped = groupBy(chatDocs, (chat) {
                String dateTime = chat['dateTime'];
                return dateTime;
              });
              (grouped.forEach((m, v) {
                print('$m');
                for (int i = 0; i < v.length; i++) {
                  print(v[i]['text']);
                }
              }));
              return ListView.builder(
                  reverse: true,
                  itemCount: grouped.keys.length,
                  itemBuilder: (ctx, index1) {
                    String date = grouped.keys.toList()[index1];
                    List messages = grouped[date];
                    return Column(
                      mainAxisSize: MainAxisSize.min,
                      children: <Widget>[
                        Text(date),
                        ListView.builder(
                            reverse: true,
                            primary: false,
                            shrinkWrap: true,
                            itemCount: messages.length,
                            itemBuilder: (context, index) {
                              return MyMessageBubble(
                                  chatDocs[index].documentID,
                                  chatDocs[index]['text'],
                                  (chatDocs[index]['userId'] == futureSnapshot.data.uid) ? true : false,
                                  ValueKey(chatDocs[index].documentID));
                            })
                      ],
                    );
                  });
            }
          },
        );
      },
    );
  }

这是我正在获取的消息列表

这是 UI。我在控制台中打印的结果在 UI 中没有正确显示。我尝试为两个列表构建器设置键，但没有成功。有什么办法可以纠正

Answer 1

您使用了错误的列表：

这个：

chatDocs[index].documentID,
chatDocs[index]['text'],
(chatDocs[index]['userId'] == futureSnapshot.data.uid) ? true : false,
ValueKey(chatDocs[index].documentID));

应该引用messages，而不是chatDocs。因为index 是messages 的索引。