listview - 如何在streambuilder中查询firestore文档并更新listview

Question

我正在尝试从名为“posts”的 Firestore 集合中检索帖子，其中包含 帖子创建者的用户 ID 和帖子描述，这可以通过同时使用 StreamBuilder 和 FutureBuilder(不推荐，因为它只获取一次快照，并且在字段更改时不会更新)。

但是，我想用 帖子创建者的用户 ID 查询另一个名为“用户”的集合，并检索与用户 ID 匹配的文档。

这是我的第一个方法:

StreamBuilder<QuerySnapshot>(
  stream:Firestore.instance.collection("posts").snapshots(),
  builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
    if (!snapshot.hasData) {
      return Center(
        child: _showProgressBar,
      );
    }

   List<DocumentSnapshot> reversedDocuments = snapshot.data.documents.reversed.toList();
    return ListView.builder(
      itemCount: reversedDocuments.length,
      itemBuilder: (BuildContext context, int index){

        String postAuthorID = reversedDocuments[index].data["postAuthorID"].toString();
        String postAuthorName = '';
        Firestore.instance.collection("users")
        .where("userID", isEqualTo: postAuthorID).snapshots().listen((dataSnapshot) {
            print(postAuthorName = dataSnapshot.documents[0].data["username"]);
          setState(() {
            postAuthorName = dataSnapshot.documents[0].data["username"];                  
          });
        });

        String desc = reversedDocuments[index].data["post_desc"].toString();

        return new ListTile(
          title: Container(
            child: Row(
              children: <Widget>[
                Expanded(
                  child: Card(
                    child: new Column(
                      children: <Widget>[
                        ListTile(
                          title: Text(postAuthorName, //Here, the value is not changed, it holds empty space.
                            style: TextStyle(
                              fontSize: 20.0,
                            ),
                          ),
                          subtitle: Text(desc),
                        ),
                       )

了解ListView.builder()只能根据DocumentSnapshot列表渲染item，无法处理builder内部的查询。

经过多次研究: 我尝试了许多替代方法，例如尝试在 initState() 中构建列表，尝试使用 Nested Stream Builder:

return StreamBuilder<QuerySnapshot>(
  stream: Firestore.instance.collection('posts').snapshots(),
  builder: (context, snapshot1){
    return StreamBuilder<QuerySnapshot>(
      stream: Firestore.instance.collection("users").snapshots(),
      builder: (context, snapshot2){
        return ListView.builder(
          itemCount: snapshot1.data.documents.length,
          itemBuilder: (context, index){
            String desc = snapshot1.data.documents[index].data['post_description'].toString();
            String taskAuthorID = snapshot1.data.documents[index].data['post_authorID'].toString();
            var usersMap = snapshot2.data.documents.asMap();
            String authorName;
            username.forEach((len, snap){
              print("Position: $len, Data: ${snap.data["username"]}");
              if(snap.documentID == post_AuthorID){
                authorName = snap.data["username"].toString();
              }
            });
            return ListTile(
              title: Text(desc),
              subtitle: Text(authorName), //Crashes here...
            );
          },
        );
      }
    );
  }
);

尝试使用 Stream Group 并无法找到完成此操作的方法，因为它只是组合了两个流，但我希望通过来自第一个流的值获取第二个流。

这是我的 Firebase 集合截图:

Firestore“帖子”集合:

Firestore“用户”集合:

我知道这是一件很简单的事情，但还是找不到任何教程或文章来实现这一点。

Answer 1

因为我花了几个小时试图弄清楚这一点，所以为将来的人发帖 - 希望它可以拯救其他人。

首先我建议阅读 Stream s: https://www.dartlang.org/tutorials/language/streams 这将有所帮助，而且是简短的阅读

自然的想法是有一个嵌套的StreamBuilder内外StreamBuilder ，如果 ListView 的大小很好不会因为内部 StreamBuilder 而改变接收数据。您可以在没有数据时创建一个具有固定大小的容器，然后在数据丰富的小部件准备好时呈现它。就我而言，我想创建一个 Card对于“外部”集合和“内部”集合中的每个文档。例如，我有一个组集合，每个组都有用户。我想要这样的 View :

[
  Group_A header card,
  Group_A's User_1 card,
  Group_A's User_2 card,
  Group_B header card,
  Group_B's User_1 card,
  Group_B's User_2 card,
]

嵌套 StreamBuilder方法呈现数据，但滚动 ListView.builder是一个问题。滚动时，我猜高度计算为( group_header_card_height + inner_listview_no_data_height )。当内部 ListView 接收到数据时，它扩展了列表高度以适应和滚动抽搐。这是 Not Acceptable 用户体验。

解决方案要点:

• 所有数据应在 StreamBuilder 之前获取的builder执行。这意味着您的 Stream需要包含来自两个集合的数据
• 虽然Stream可以容纳多个项目，你想要一个Stream<List<MyCompoundObject>> .对此答案的评论 (https://stackoverflow.com/a/53903960/608347) 有帮助

我采取的方法基本上是

1. 创建组到用户列表对的流

   一个。查询群组

   b.对于每个组，获取适当的 userList

   c。返回包装每一对的自定义对象列表

2. StreamBuilder正常，但在 group-to-userList 对象上，而不是 QuerySnapshot s

它看起来像什么

复合助手对象:

class GroupWithUsers {
  final Group group;
  final List<User> users;

  GroupWithUsers(this.group, this.users);
}

StreamBuilder

    Stream<List<GroupWithUsers>> stream = Firestore.instance
        .collection(GROUP_COLLECTION_NAME)
        .orderBy('createdAt', descending: true)
        .snapshots()
        .asyncMap((QuerySnapshot groupSnap) => groupsToPairs(groupSnap));

    return StreamBuilder(
        stream: stream,
        builder: (BuildContext c, AsyncSnapshot<List<GroupWithUsers>> snapshot) {
            // build whatever
    });

本质上，“为每个组创建一对”处理所有类型的转换

  Future<List<GroupWithUsers>> groupsToPairs(QuerySnapshot groupSnap) {
    return Future.wait(groupSnap.documents.map((DocumentSnapshot groupDoc) async {
      return await groupToPair(groupDoc);
    }).toList());
  }

最后，实际内部查询得到User s 和构建我们的助手

Future<GroupWithUsers> groupToPair(DocumentSnapshot groupDoc) {
    return Firestore.instance
        .collection(USER_COLLECTION_NAME)
        .where('groupId', isEqualTo: groupDoc.documentID)
        .orderBy('createdAt', descending: false)
        .getDocuments()
        .then((usersSnap) {
      List<User> users = [];
      for (var doc in usersSnap.documents) {
        users.add(User.from(doc));
      }

      return GroupWithUser(Group.from(groupDoc), users);
    });
  }