Question

我正在使用Flutter和Firebase构建一个一对一的聊天应用程序，我想以发生日期的标签显示所有聊天记录，就像在所有主要的聊天应用程序上一样。

我按顺序升序从Firestore中检索数据，方法是在每个邮件的时间戳字段上使用按命令排序，并按照NiklasLehnfeld的建议进行操作我使用了收集包中的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的索引。

Flutter List用户界面未正确更新

1 个答案: