Flutter List用户界面未正确更新 [英] Flutter List UI not updating properly

问题描述

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

我通过在每个消息的时间戳字段上按命令使用命令并按照

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

解决方案

错误列表：

此：

  chatDocs [index] .documentID，
 chatDocs [index ] ['text']，
（chatDocs [index] ['userId'] == futureSnapshot.data.uid）吗？ true：false，
 ValueKey（chatDocs [index] .documentID））; 
  

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

I am building a one to one chat app using Flutter and firebase and I want to display all the chats under label of the day on which it happened,like it is on all major chat apps.

I retrieve data from firestore in ascending order of time by using order by command on the timestamp field of each message and as suggested by NiklasLehnfeld i used groupBy method in the collection package to group my messages and used nested list view builders outer one for creating groups and inner one for filling those groups with data.

Here is the code

  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));
                            })
                      ],
                    );
                  });
            }
          },
        );
      },
    );
  }

This is the list of messages that I am fetching

This is the UI .The results that i am printing in console are not displaying correctly in UI.I tried setting keys for both the list builders but no success. Is there any way it can be corrected

解决方案

You are using the wrong list:

This:

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

should reference messages, not chatDocs. Because index is the index into messages.

这篇关于Flutter List用户界面未正确更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！