公司的FireStore StreamBuilder嵌套AnimatedList(Firestore

2019-09-26 06:13发布

我目前正在对我的应用程序的聊天方面。 和我设置了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部件工作。 我不知道是否与此理解我的目标有所帮助。

谢谢

Answer 1:

尝试验证,如果你的快照有数据

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


Answer 2:

更新:我通过添加自定义动画以及修改cloud_firestore的文档中的代码固定它。 我的代码看起来现在这个样子

 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 ListView(
                    physics: const AlwaysScrollableScrollPhysics(),
                    reverse: true,
                    padding: const EdgeInsets.all(8.0),
                    children: snapshot.data.documents.map((DocumentSnapshot messageSnapshot) {
                        return new ChatMessageListItem(
                        context: context,
                        animation: _animation,
                        messageSnapshot: messageSnapshot,
                        currentUserEmail: curUserEmail,
                      );
                    }).toList(),
                  ): const CircularProgressIndicator();


文章来源: Firestore StreamBuilder with nested AnimatedList