时间戳

首页 > 解决方案 > ListView里面的ListView显示错误的项目Flutter

listview - ListView里面的ListView显示错误的项目Flutter

问题描述

我有一个带有评论项目的 ListView，每个评论都有一个带有评论回复的新 ListView，我使用了 Firebase，当我回复评论时，它在 ListView 上显示错误的文本，但在控制台中打印了正确的文本。当我回去再回来时，它会显示正确的值。观看视频进行澄清。 

 Padding(
          padding: EdgeInsets.only(left: 0.0),
             child: StreamBuilder(
             stream: getCommentReply(listMessage[index]['id']),
             builder: (context, snapshot) {
               if (!snapshot.hasData) {
               return Center(child: Text(''));
               }
               var listReplyMessage = snapshot.data.documents;
               return Padding(
                   padding: EdgeInsets.only(top: 8.0),
                     child: commentsReplyItems(listReplyMessage,
                     snapshot, listMessage[index]['id']));
        }))

  Widget commentsReplyItems(
    var listMessage, AsyncSnapshot snapshot, String commentID) {

       return CommentReplay(
       listMessage, snapshot, commentID, widget.currentUser, widget.postID);
 }




 Stream<QuerySnapshot> getCommentReply(String msgID) {
   Stream<QuerySnapshot> _query = Firestore.instance
    .collection('Posts')
    .document(widget.postID)
    .collection('Comments')
    .document(msgID)
    .collection('Reply')
    .orderBy('created_at', descending: true)
    .limit(2)
    .snapshots();

    return _query;
 }

评论回复项目

class CommentReplay extends StatefulWidget {
List<dynamic> listMessage;
AsyncSnapshot snapshot;
String commentID;
FirebaseUser currentUser;
String postID;

CommentReplay(this.listMessage, this.snapshot, this.commentID,
  this.currentUser, this.postID);

 @override
 _CommentReplayState createState() => _CommentReplayState();
}

class _CommentReplayState extends State<CommentReplay> {
  var _key = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
   return ListView.builder(
      shrinkWrap: true,
      key: _key,
      physics: ClampingScrollPhysics(),
      itemCount: widget.snapshot.data.documents.length,
    itemBuilder: (context, position) {
      //print(position);
      return Container(
        padding: EdgeInsets.only(top: 5.0),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
           Text(
                                  widget.listMessage[position['commentText'],
                                  textStyle: TextStyle(
                                      fontSize: 16.0,
                                      color: Color(0xff0D0E15)),
                                  textAlign: TextAlign.start,

                                )
          ],
        ),
      );
    });
}

标签： listviewflutter

解决方案

查看您的代码后，我发现使用带有评论回复容器的密钥可以解决您的问题。

我像下面这样使用它并且它的工作

 return ListView.builder(
    shrinkWrap: true,
    controller: _replayController,
    physics: ClampingScrollPhysics(),
    itemCount: snapshot.data.documents.length,
    itemBuilder: (context, index) {
      return Container(
        key: Key(listMessage[index]['id']),
        padding: EdgeInsets.only(top: 5.0),
        child: Row()
   )
    });

推荐阅读