Flutter：将一组 Firestore 流呈现为列表视图

Question

我试图在我的应用程序中显示多个流的列表视图，但我想不出这样做的好方法。我在网上搜索了解决方案，但找不到有效的解决方案。 火库代码：

      Stream<QuerySnapshot<Map<String, dynamic>>> getGroupStream<T>() {
        List<Stream<QuerySnapshot<Map<String, dynamic>>>> list = [];
        List<String> members = [];
        _fireStore
        .collection("groups")
        .doc(gid)
        .get()
        .then((docSnapshot) { 
          members = docSnapshot.data()!["members"];
          for (String member in members) {
            list.add(_fireStore
              .collection("users")
              .doc(member)
              .collection("groceries")
              .snapshots());
          }
        });
    
        return StreamGroup.merge(list);
      }

内容构建：

Widget _buildContent(BuildContext context, Stream<QuerySnapshot> stream) {
    return StreamBuilder<QuerySnapshot>(
      stream: stream,
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          final docs = snapshot.data!.docs;
          if (docs.isEmpty) {
            return Center(
                child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  "The list is empty",
                  style: TextStyle(fontSize: 32, color: Colors.black54),
                ),
                Text(
                  "Add a new item to get started",
                  style: TextStyle(fontSize: 16, color: Colors.black54),
                ),
              ],
            ));
          }
          int index = -1;
          final cards = docs
              .map((doc) => CrossableListTile(
                  doc, _showSetGroceryButtomSheetForm, index++))
              .toList();
          return Container(
            padding: EdgeInsets.symmetric(vertical: 20, horizontal: 10),
            child: ListView(
              children: cards,
            ),
          );
        } else if (snapshot.hasError) {
          return Center(
            child: Column(
              children: [Text("An error has occured while loading you'r list")],
            ),
          );
        }
        return Center(
            child: CircularProgressIndicator(
          color: barColor,
        ));
      },
    );
  }

  _showSetGroceryButtomSheetForm(
      BuildContext context, String name, String amount) {
    setState(() {
      _changeIsButtomSheetOpen();
    });

    showBottomSheet(
        context: context,
        builder: (context) => Provider<Function>(
            create: (_) => _changeIsButtomSheetOpen,
            builder: (context, w) => GestureDetector(
                onVerticalDragStart: (_) {},
                child: AddGroceryForm(Grocery(name: name, quantity: amount)))));
  }

正文：

body: TabBarView(children: [
        _buildContent(
          context,
          db.getGroupStream(),
        ),
        _buildContent(
          context,
          db.getPesonalStream(),
        ),
      ]),

iv 尝试了很多不同的东西，但没有任何效果。 单流显示完美，多流显示不行。

Answer 1

将getGroupStream 方法更新为以下内容：

Stream<QuerySnapshot<Map<String, dynamic>>> getGroupStream<T>() {
  List<Stream<QuerySnapshot<Map<String, dynamic>>>> list = [];

  _fireStore.collection("groups").doc(gid).snapshots().forEach(((docSnapshot) {
    List<String> members = docSnapshot.data()!["members"];

    list = members
        .map((member) => _fireStore
            .collection("users")
            .doc(member)
            .collection("groceries")
            .snapshots())
        .toList();
  }));

  return StreamGroup.merge(list);
}

此方法通过使用.snapshots() 而不是在您的问题中使用.get().then() 来获取_fireStore.collection("groups").doc(gid) 的流。