在不使用流的情况下将 Firestore 数据显示为列表答案

【问题标题】：Display Firestore data as list without using a stream在不使用流的情况下将 Firestore 数据显示为列表
【发布时间】：2022-11-13 08:07:27
【问题描述】：

我正在尝试对我的 Firebase Firestore 数据运行查询并将结果显示为列表。通常，当我这样做时，我使用 streambuilder，它会在任何数据更改时更新结果。我想知道如何在不订阅流的情况下只显示一次相同的数据。这是我的 streambuilder 代码，它会根据更改进行更新。

StreamBuilder<QuerySnapshot>(
        stream: FirebaseFirestore.instance
            .collection('announcements')
            .orderBy('date', descending: true)
            .snapshots(),
        builder:
            (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshots) {
          if (snapshots.connectionState == ConnectionState.active &&
              snapshots.hasData) {
            return ListView(
              shrinkWrap: true,
              physics: const BouncingScrollPhysics(),
              children: snapshots.data!.size == 0
                  ? [
                      const Padding(
                        padding: EdgeInsets.only(top: 10),
                        child: Text(
                          "You have no announcements",
                          style: TextStyle(
                            height: 1.0,
                            fontFamily: "urwmedium",
                            color: Color(0xffD5D6D7),
                            fontSize: 20,
                          ),
                        ),
                      ),
                    ]
                  : snapshots.data!.docs.map(
                      (DocumentSnapshot document) {
                        Map<String, dynamic> data =
                            document.data()! as Map<String, dynamic>;
                        return Text(
                          data['announcementTitle'],
                        );
                      },
                    ).toList(),
            );
          }
          return Center(
            child: CircularProgressIndicator(
              color: CustomColors.textColor,
            ),
          );
        },
      ),

上面的代码有效，但同样，它会实时加载信息。如果我希望它在打开时只加载一次，代码会是什么？

【问题讨论】：

标签： flutter firebase firebase-realtime-database google-cloud-firestore flutter-layout

【解决方案1】：

因为StreamBuilder 有助于获取您的收藏快照流

要仅获取该数据一次，请改用FutureBuilder：

FutureBuilder<QuerySnapshot>(
    future: FirebaseFirestore.instance
        .collection('announcements')
        .orderBy('date', descending: true)
        .get(),
    builder:
        (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshots) {
      if (snapshots.connectionState == ConnectionState.done &&
          snapshots.hasData) {
        return ListView(
          shrinkWrap: true,
          physics: const BouncingScrollPhysics(),
          children: snapshots.data!.size == 0
              ? [
                  const Padding(
                    padding: EdgeInsets.only(top: 10),
                    child: Text(
                      "You have no announcements",
                      style: TextStyle(
                        height: 1.0,
                        fontFamily: "urwmedium",
                        color: Color(0xffD5D6D7),
                        fontSize: 20,
                      ),
                    ),
                  ),
                ]
              : snapshots.data!.docs.map(
                  (DocumentSnapshot document) {
                    Map<String, dynamic> data =
                        document.data()! as Map<String, dynamic>;
                    return Text(
                      data['announcementTitle'],
                    );
                  },
                ).toList(),
        );
      }
      return Center(
        child: CircularProgressIndicator(
          color: CustomColors.textColor,
        ),
      );
    },
  ),

【讨论】：