如何不使用Stream一次性加载Firestore数据并展示为列表

要实现页面打开时仅加载一次Firestore数据，只需将StreamBuilder替换为FutureBuilder，并使用Firestore的get()方法（单次获取数据，而非订阅实时数据流）。修改后的完整代码如下：

FutureBuilder<QuerySnapshot>(
  future: FirebaseFirestore.instance
      .collection('announcements')
      .orderBy('date', descending: true)
      .get(),
  builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
    // 处理加载状态
    if (snapshot.connectionState == ConnectionState.waiting) {
      return Center(
        child: CircularProgressIndicator(
          color: CustomColors.textColor,
        ),
      );
    }

    // 处理数据获取完成的情况
    if (snapshot.hasData) {
      return ListView(
        shrinkWrap: true,
        physics: const BouncingScrollPhysics(),
        children: snapshot.data!.size == 0
            ? [
                const Padding(
                  padding: EdgeInsets.only(top: 10),
                  child: Text(
                    "暂无公告",
                    style: TextStyle(
                      height: 1.0,
                      fontFamily: "urwmedium",
                      color: Color(0xffD5D6D7),
                      fontSize: 20,
                    ),
                  ),
                ),
              ]
            : snapshot.data!.docs.map(
                (DocumentSnapshot document) {
                  Map<String, dynamic> data =
                      document.data()! as Map<String, dynamic>;
                  return Text(
                    data['announcementTitle'],
                  );
                },
              ).toList(),
      );
    }

    // 处理无数据或出错的情况
    return const Center(
      child: Text("加载数据失败"),
    );
  },
)

关键改动说明： #

• 替换组件：用FutureBuilder替代StreamBuilder，适配Firestore单次查询的Future类型返回值
• 修改数据源：将.snapshots()（实时流）改为.get()（单次获取）
• 调整状态判断：Future的连接状态使用ConnectionState.waiting判断加载中，而非Stream的ConnectionState.active
• 补充异常处理：增加了无数据或加载失败的兜底UI（可根据需求调整）

内容的提问来源于stack exchange，提问作者Mohammad Abd-Elmoniem