flutter:将一组firestore流显示为列表视图

Question

我试图在我的应用程序中呈现多个流的列表视图，但我不能想到这样做的好方法。我在网上搜索了一个解决方案，但找不到一个有效的。firestore代码:

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(),
),
]),

我试了那么多不同的东西，但都不起作用。单流显示很好，多流显示不行。

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)的流。