Flutter中基于双StreamBuilder实现按更新时间排序的组名列表

需要按最后更新时间倒序展示用户的群组名称，其中：

• 用户所属的群组ID列表从users集合的当前用户文档中获取
• 群组的最后更新时间（LastUpdate）和名称从groups集合中获取
  需合并两组数据后按更新时间排序展示，现有代码未完成，请求完善。

Groups集合结构说明 #

groups集合的文档包含以下核心字段：

• groupId：群组唯一标识ID
• groupName：群组名称
• LastUpdate：记录群组最后更新的时间戳

当前代码 #

StreamBuilder(
        stream: FirebaseFirestore.instance
            .collection("users")
            .doc(widget.uid)
            .snapshots(),
        builder: (context, AsyncSnapshot snapshot) {
          if (snapshot.hasData) {
            if (snapshot.data['groups'] != null) {
              if (snapshot.data['groups'].length != 0) {
                // 2nd streamBuilder
                return StreamBuilder(
                  stream: FirebaseFirestore.instance
                      .collection("groups")
                      .orderBy("LastUpdate")
                      .where("groupId",
                          isEqualTo: getId(snapshot.data["groups"][Index]))
                      .snapshots(),
                  builder: (context, snapshot2) {
                    return Padding(
                      padding: const EdgeInsets.only(top: 5),
                      child: ListView.builder(
                        itemCount: snapshot.data['groups'].length,
                        itemBuilder: (context, index) {
                          return Center(
                          child: Text(snapshot.data["groups"][index]));
                        },
                      ),
                    );
                  },
                );
              } else {
                return noGroupWidget();
              }
            } else {
              return noGroupWidget();
            }
          } else {
            return Center(
              child: CircularProgressIndicator(
                  color: Theme.of(context).primaryColor),
            );
          }
        });

原代码仅查询单个群组ID，无法批量获取用户所有群组数据，也未实现排序逻辑。以下是修复后的完整代码：

StreamBuilder(
  stream: FirebaseFirestore.instance
      .collection("users")
      .doc(widget.uid)
      .snapshots(),
  builder: (context, AsyncSnapshot userSnapshot) {
    // 用户数据加载中
    if (userSnapshot.connectionState == ConnectionState.waiting) {
      return Center(
        child: CircularProgressIndicator(color: Theme.of(context).primaryColor),
      );
    }

    // 用户无群组数据
    if (!userSnapshot.hasData || userSnapshot.data!['groups'] == null || userSnapshot.data!['groups'].isEmpty) {
      return noGroupWidget();
    }

    // 提取用户所有群组ID列表
    List<String> userGroupIds = List<String>.from(userSnapshot.data!['groups']);

    // 批量查询并排序群组数据
    return StreamBuilder<QuerySnapshot>(
      stream: FirebaseFirestore.instance
          .collection("groups")
          .where("groupId", whereIn: userGroupIds)
          .orderBy("LastUpdate", descending: true) // 按更新时间倒序，最新的在前
          .snapshots(),
      builder: (context, AsyncSnapshot<QuerySnapshot> groupsSnapshot) {
        // 群组数据加载中
        if (groupsSnapshot.connectionState == ConnectionState.waiting) {
          return Center(
            child: CircularProgressIndicator(color: Theme.of(context).primaryColor),
          );
        }

        // 无匹配的群组数据
        if (!groupsSnapshot.hasData || groupsSnapshot.data!.docs.isEmpty) {
          return noGroupWidget();
        }

        // 已排序的群组列表
        List<QueryDocumentSnapshot> sortedGroups = groupsSnapshot.data!.docs;

        // 渲染群组列表
        return Padding(
          padding: const EdgeInsets.only(top: 5),
          child: ListView.builder(
            itemCount: sortedGroups.length,
            itemBuilder: (context, index) {
              Map<String, dynamic> groupData = sortedGroups[index].data() as Map<String, dynamic>;
              return Center(
                child: Text(groupData['groupName'] ?? '未知群组'),
              );
            },
          ),
        );
      },
    );
  },
);

关键改进点 #

1. 批量查询优化：使用whereIn替代单个isEqualTo，一次性获取用户所有群组数据，避免多次请求
2. 原生排序实现：直接在Firestore查询时用orderBy("LastUpdate", descending: true)完成排序，无需客户端二次处理
3. 完善状态处理：补充了加载状态、空数据状态的判断，避免空指针异常
4. 正确展示名称：直接从groups集合读取groupName，而非展示users集合中的ID

注意：Firestore的whereIn查询最多支持50个元素，若用户群组数量超过50，需拆分查询后合并结果。

内容的提问来源于stack exchange，提问作者Harshana