时间戳

首页 > 解决方案 > 带有嵌套 AnimatedList 的 Firestore StreamBuilder

dart - 带有嵌套 AnimatedList 的 Firestore StreamBuilder

问题描述

我目前正在研究我的应用程序的聊天方面。我在 StreamBuilder 中设置了一个 AnimatedList 以使消息反向显示。这是我的代码

      children: <Widget>[
        new Flexible(
          child: new StreamBuilder<QuerySnapshot> (
            stream: chatRoomRef.document(widget.chatRoomID).collection('messages')
                               .orderBy('time').snapshots(),
            builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot){
              return new AnimatedList(
                reverse: true,
                padding: const EdgeInsets.all(8.0),
                itemBuilder: (BuildContext context, int index, Animation<double> animation) {
                  return new ChatMessageListItem(
                    context: context,
                    index: index,
                    animation: animation,
                    reference: snapshot,
                  );
                }
              );
            }, 
          ),
        ),

我的问题是构建器永远不会被击中，所以 AnimatedList 永远不会被调用。我不确定设置是否正确，因此非常感谢您提供任何帮助。

编辑：我试图让它像 FirebaseAnimatedList 小部件一样工作。我不知道这是否有助于理解我的目标。

谢谢

标签： dartgoogle-cloud-firestoreflutter

解决方案

尝试验证您的快照是否有数据

            children: <Widget>[
                    new Flexible(
                      child: new StreamBuilder<QuerySnapshot> (
                        stream: chatRoomRef.document(widget.chatRoomID).collection('messages')
                                           .orderBy('time').snapshots(),
                        builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot){
                          return snapshot.hasData ? new AnimatedList(
                            reverse: true,
                            padding: const EdgeInsets.all(8.0),
                            itemBuilder: (BuildContext context, int index, Animation<double> animation) {
                              return new ChatMessageListItem(
                                context: context,
                                index: index,
                                animation: animation,
                                reference: snapshot,
                              );
                            }
                          ): new CircularProgressIndicator();
                        }, 
                      ),
                    ),

推荐阅读