时间戳

首页 > 解决方案 > 如何从 Firebase 获取数据并在网格视图中显示它们？

flutter - 如何从 Firebase 获取数据并在网格视图中显示它们？

问题描述

我在 firebase 实时数据库中有一些数据。我想在 gridview 中显示它们，如果我单击任何项​​目，它将带我另一页。我该怎么做？

我正在执行此代码来打印我的数据值：

void printFirebase(){
    dbRef.once().then((DataSnapshot snapshot) {
      print('pets : ${snapshot.value}');
    });
  }

Column(
              children: <Widget> [
                ElevatedButton(onPressed: printFirebase,
                    child: Text('click'),
                )
              ],
          ),

标签： flutter

解决方案

您可以使用 StreamBuilder 并通过流返回带有子项的 GridView

     StreamBuilder(
                    stream: firebaseFirestore
                        .collection(widget.sportName)
                        .snapshots(),
                    builder: (BuildContext context,
                        AsyncSnapshot<QuerySnapshot> snapshot) {
                      if (!snapshot.hasData) {
                        return Center(
                          child: CircularProgressIndicator(),
                        );
                      }
                      return GridView.count(
                        shrinkWrap: true,
                        physics: ClampingScrollPhysics(),
                        crossAxisCount: 5,
                        mainAxisSpacing: 10.0,
                        childAspectRatio: 1,
                        crossAxisSpacing: 10.0,
                        children: snapshot.data!.docs.map((document) {
                          return GestureDetector(
                            child:
                                dateSelector(document['date'], document.id),
                          );
                        }).toList(),
                      );
                    },
                  ),

推荐阅读