Flutter新手求助：如何在同一Widget中访问两个Firebase Firestore集合

嘿，作为Flutter新手，遇到这种多Stream的问题真的超常见！别担心，我来给你两种实用的方法，帮你在同一个Widget里同时调用Firestore的两个集合：

方法一：嵌套StreamBuilder #

这是最直接的方式，把一个StreamBuilder嵌套在另一个的builder回调里，等第一个集合的数据加载完成后，再加载第二个集合的内容。这样你就能同时拿到两个集合的数据啦。

示例代码：

return StreamBuilder<QuerySnapshot>(
  // 第一个集合：schedules
  stream: FirebaseFirestore.instance.collection('schedules').snapshots(),
  builder: (context, scheduleSnapshot) {
    if (!scheduleSnapshot.hasData) {
      return const Center(child: Text('加载中...'));
    }

    // 拿到第一个集合的数据
    final schedules = scheduleSnapshot.data!.docs;

    // 嵌套第二个StreamBuilder加载第二个集合，这里用'users'举例
    return StreamBuilder<QuerySnapshot>(
      stream: FirebaseFirestore.instance.collection('users').snapshots(),
      builder: (context, userSnapshot) {
        if (!userSnapshot.hasData) {
          return const Center(child: Text('加载中...'));
        }

        // 拿到第二个集合的数据
        final users = userSnapshot.data!.docs;

        // 现在你可以同时使用schedules和users的数据来构建UI了
        return ListView(
          children: [
            Text('日程列表：${schedules.length}条'),
            Text('用户列表：${users.length}条'),
            // 这里可以继续添加你需要的UI组件
          ],
        );
      },
    );
  },
);

方法二：使用rxdart合并两个Stream #

如果觉得嵌套StreamBuilder不够优雅，你可以用rxdart库的CombineLatestStream来把两个Stream合并成一个，这样就能在一个StreamBuilder里同时处理两个集合的数据。

步骤如下：

1. 先在pubspec.yaml里添加rxdart依赖：

dependencies:
  flutter:
    sdk: flutter
  rxdart: ^0.27.7 # 可以替换成最新版本号

2. 然后使用CombineLatestStream合并两个Stream：

import 'package:rxdart/rxdart.dart';

// ...

return StreamBuilder<List<QuerySnapshot>>(
  stream: CombineLatestStream.list([
    FirebaseFirestore.instance.collection('schedules').snapshots(),
    FirebaseFirestore.instance.collection('users').snapshots(),
  ]),
  builder: (context, snapshot) {
    if (!snapshot.hasData) {
      return const Center(child: Text('加载中...'));
    }

    // 从合并后的Stream里分别取出两个集合的数据
    final schedulesSnapshot = snapshot.data![0];
    final usersSnapshot = snapshot.data![1];

    final schedules = schedulesSnapshot.docs;
    final users = usersSnapshot.docs;

    // 构建你的UI
    return Column(
      children: [
        Expanded(
          child: ListView.builder(
            itemCount: schedules.length,
            itemBuilder: (context, index) {
              return ListTile(title: Text(schedules[index]['title']));
            },
          ),
        ),
        Expanded(
          child: ListView.builder(
            itemCount: users.length,
            itemBuilder: (context, index) {
              return ListTile(title: Text(users[index]['name']));
            },
          ),
        ),
      ],
    );
  },
);

两种方法各有优劣：嵌套StreamBuilder不需要额外依赖，适合简单场景；而rxdart的方式更简洁，适合复杂的多Stream合并场景。你可以根据自己的需求来选～

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