带有嵌套AnimatedList的Firestore StreamBuilder

小编典典

带有嵌套AnimatedList的Firestore StreamBuilder

flutter

我目前正在研究应用程序的聊天功能。并且我在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小部件一样工作。我不知道这是否有助于了解我的目标。

谢谢

阅读 475

2020-08-13

共1个答案

小编典典

更新：我通过添加自定义动画以及修改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();

2020-08-13