1

我的应用程序中的每个帖子都有一个评论页面，我使用streambuilder从 Firebase 数据库中获取评论。对于每条评论，我都会显示用户的图像和他们的评论。

要获取用户的图片，我需要使用futurebuilder在userData文档中找到用户，然后抓取图片url并显示（用户可以随时更改他们的图片配置文件，名称等，我必须抓取每次我想在任何地方显示他们的名字或图像时，都会从userData文档中更新一个）。这是我使用的代码：

StreamBuilder(
  stream: Firestore.instance
      .collection('posts')
      .document(postId)
      .collection('postComments')
      .orderBy(
        'createdAt',
        descending: true,
      )
      .snapshots(),
  builder: (ctx, chatSnapshot) {
    if (chatSnapshot.connectionState == ConnectionState.waiting) {
      return Center(
        child: CircularProgressIndicator(),
      );
    }
    final chatDocs = chatSnapshot.data.documents;
    return ListView.builder(
      shrinkWrap: true,
      reverse: true,
      itemCount: chatDocs.length,
      itemBuilder: (ctx, index) {
        return FutureBuilder(
          future: Firestore.instance
              .collection('userData')
              .document(userId)
              .get(),
          builder: (context, userSnapshot) {
            if (userSnapshot.connectionState == ConnectionState.waiting) {
              return Container(
                child: CircularProgressIndicator(
                  valueColor:
                      AlwaysStoppedAnimation(Color.fromRGBO(0, 0, 0, 0)),
                ),
              );
            }
            final userData = userSnapshot.data;
            User commentor = User.fromDocument(userData);
            return Padding(
              padding: const EdgeInsets.all(20.0),
              child: Row(
                children: [
                  CircleAvatar(
                    backgroundImage: NetworkImage(
                      commentor.userImage,
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Container(
                      width: MediaQuery.of(context).size.width * 0.5,
                      padding: EdgeInsets.all(10),
                      color: Colors.grey,
                      child: Text(
                        chatDocs[index]['comment'],
                        style: TextStyle(
                          color: Colors.black,
                        ),
                        textAlign: TextAlign.start,
                      ),
                    ),
                  ),
                ],
              ),
            );
          },
        );
      },
    );
  },
);

当我从下到上滚动时（最近到旧评论），滚动非常流畅，没有问题，但是当我到达列表末尾（最旧的评论）并开始向下滚动时，之间有一个奇怪的跳转至少在前几卷中，评论和滚动并不流畅。

我在这里有这个屏幕截图，它显示了奇怪的滚动行为。为什么会这样？

谢谢！

4

0 回答 0