如何收听流和更新访问Firebase的Flutter GridView构建器

Question

我需要一个示例代码，其中一个Flutter Gridview构建器流Firebase数据(例如，单个集合和多个文档，每个都有多个字段)，可以由用户直接从Gridview

修改我看过这个教程=>https://www.youtube.com/watch?v=ErP_xomHKTw虽然它展示了如何从Firebase访问和修改数据，但我仍然无法理解Firebase和Gridview构建器的交互。

Answer 1

使用GridView构建流

StreamBuilder<QuerySnapshot>(
stream: FirebaseFirestore.instance.collection('products').snapshots(),
builder: (context, snapshot) {
if (snapshot.hasData) {
return  GridView.builder(
gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 200,
childAspectRatio: 3 / 2,
crossAxisSpacing: 20,
mainAxisSpacing: 20),
itemCount: snapshot.data!.docs.length,
itemBuilder: (context, index) {
DocumentSnapshot doc = snapshot.data!.docs[index];
return Column(
children:[
Text(doc['name']),
Text(doc['price']);
);
);
}),
} else {
return Text("No data");
}
},
)

---

Stream Builder using ListView

StreamBuilder<QuerySnapshot>(
stream: FirebaseFirestore.instance.collection('products').snapshots(),
builder: (context, snapshot) {
if (snapshot.hasData) {
return ListView.builder(
itemCount: snapshot.data!.docs.length,
itemBuilder: (context, index) {
DocumentSnapshot doc = snapshot.data!.docs[index];
return Column(
children:[
Text(doc['name']),
Text(doc['price']);
);
});
} else {
return Text("No data");
}
},
)