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

Posted 2023-02-23

【中文标题】如何在streambuilder中查询firestore文档并更新listview

【英文标题】：How to query firestore document inside streambuilder and update the listview

【发布时间】：2019-03-09 06:11:54

【问题描述】：

我正在尝试从名为“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“用户”集合：

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

【问题讨论】：

无需调用setState，这是在构建方法中。不过，一般来说，您应该远离在构建方法中查询 Firestore。查看this excellent answer，了解如何保持您的构建方法纯净。

在创建构建之前，是否有任何替代方法可以从帖子中查询用户 ID 并显示其详细信息？

为什么不将该查询放入您的initState 方法中？

好吧，我需要从“posts”集合中包含的帖子中获取帖子创建者的 ID，然后使用“users”集合查询该 ID，然后检索用户的姓名、图片或任何其他值。现在我应该在 initStae 方法中调用哪个？

【参考方案1】：

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

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

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

[
  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 接收到数据时，它会扩展列表高度以适应和滚动抖动。这是不可接受的用户体验。

解决方案要点：

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

我采取的方法基本上是

创建组到用户列表对的流

一个。查询群组

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

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

StreamBuilder 正常，但在 group-to-userList 对象而不是 QuerySnapshots

它看起来像什么

复合助手对象：

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

最后，获取Users 并构建我们的助手的实际内部查询

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);
    );
  

【讨论】：

非常感谢兄弟，你救了我的命。这种方法对我来说几乎不需要修改。

【参考方案2】：

我发布了一个类似的问题，后来找到了解决方案：将 itemBuilder 返回的小部件设置为有状态并在其中使用 FutureBuilder。

Additional query for every DocumentSnapshot within StreamBuilder

这是我的代码。在您的情况下，您可能希望使用新的 Stateful 小部件而不是 ListTile，因此您可以添加 FutureBuilder 来调用异步函数。

StreamBuilder(
                  stream: Firestore.instance
                      .collection("messages").snapshots(),
                  builder: (context, snapshot) 
                    switch (snapshot.connectionState) 
                      case ConnectionState.none:
                      case ConnectionState.waiting:
                        return Center(
                          child: PlatformProgressIndicator(),
                        );
                      default:
                        return ListView.builder(
                          reverse: true,
                          itemCount: snapshot.data.documents.length,
                          itemBuilder: (context, index) 
                            List rev = snapshot.data.documents.reversed.toList();
                            ChatMessageModel message = ChatMessageModel.fromSnapshot(rev[index]);
                            return ChatMessage(message);
                          ,
                        );
                    
                  ,
                )


class ChatMessage extends StatefulWidget 
  final ChatMessageModel _message;
  ChatMessage(this._message);
  @override
  _ChatMessageState createState() => _ChatMessageState(_message);


class _ChatMessageState extends State<ChatMessage> 
  final ChatMessageModel _message;

  _ChatMessageState(this._message);

  Future<ChatMessageModel> _load() async 
    await _message.loadUser();
    return _message;
  

  @override
  Widget build(BuildContext context) 

    return Container(
      margin: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
      child: FutureBuilder(
        future: _load(),
        builder: (context, AsyncSnapshot<ChatMessageModel>message) 
          if (!message.hasData)
            return Container();
          return Row(
            children: <Widget>[
              Container(
                margin: const EdgeInsets.only(right: 16.0),
                child: GestureDetector(
                  child: CircleAvatar(
                    backgroundImage: NetworkImage(message.data.user.pictureUrl),
                  ),
                  onTap: () 
                    Navigator.of(context)
                        .push(MaterialPageRoute(builder: (context) => 
                        ProfileScreen(message.data.user)));
                  ,
                ),
              ),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      message.data.user.name,
                      style: Theme.of(context).textTheme.subhead,
                    ),
                    Container(
                        margin: const EdgeInsets.only(top: 5.0),
                        child: _message.mediaUrl != null
                            ? Image.network(_message.mediaUrl, width: 250.0)
                            : Text(_message.text))
                  ],
                ),
              )
            ],
          );
        ,
      ),
    );
  

class ChatMessageModel 
  String id;
  String userId;
  String text;
  String mediaUrl;
  int createdAt;
  String replyId;
  UserModel user;

  ChatMessageModel(String text, String mediaUrl, String userId) 
    this.text = text;
    this.mediaUrl = mediaUrl;
    this.userId = userId;
  

  ChatMessageModel.fromSnapshot(DocumentSnapshot snapshot) 
    this.id = snapshot.documentID;
    this.text = snapshot.data["text"];
    this.mediaUrl = snapshot.data["mediaUrl"];
    this.createdAt = snapshot.data["createdAt"];
    this.replyId = snapshot.data["replyId"];
    this.userId = snapshot.data["userId"];
  

  Map toMap() 
    Map<String, dynamic> map = 
      "text": this.text,
      "mediaUrl": this.mediaUrl,
      "userId": this.userId,
      "createdAt": this.createdAt
    ;
    return map;

  

  Future<void> loadUser() async 
    DocumentSnapshot ds = await Firestore.instance
        .collection("users").document(this.userId).get();
    if (ds != null)
      this.user = UserModel.fromSnapshot(ds);
  

【讨论】：

嘿，感谢您的回复，但是，我更喜欢 StreamBuilder，因为 FutureBuilder 只被调用一次，而且我希望每次 Firestore 发生变化时更新我的​​帖子。

@sanjay 你仍然会使用你的主 StreamBuilder。 FutureBuilder 将用于获取您需要的其他信息，并且会在 StreamBuilder 检测到 Firestore 中的更改时触发。

也许可以，但我希望能够从一个集合（帖子）文档的值中执行查询，以从另一个名为 users 的集合中获取文档 ID。你的 ChatMessageModel 有没有类似的操作？

@sanjay 这就是我正在做的事情。 StreamBuilder 监听新消息，当有新消息进入时，会创建一个新的 ChatMessage 小部件，其 FutureBuilder 会为消息的所有者加载用户数据。

你能把 ChatMessageModel 的代码也贴出来，让我明白发生了什么吗？