Listview 构建器与 future 构建器一起使用来自 firestore 的数据

Question

我正在尝试使用 FutureBuilder 构建一些带有 ListView.builder 的 LisTiles。数据来自 Firestore。看起来 FutureBuilder 没有访问 ConnectionState.done，因为我一直在显示 CircularProgressIndicator()。

 var qn;
  Future<QuerySnapshot> getChargingHistory() async {
    await users
        .doc('$currentUser')
        .collection('chargingHistory')
        .get()
        .then((QuerySnapshot querySnapshot) {
      qn = querySnapshot;
      qn.docs.forEach((doc) {
        print(doc['Endzeit']);
      });
    });
    setState(() {

    });
    return qn;
  }
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Hero(
            tag: 'logo',
            child: Image.asset(
              'assets/images/rz_bildmarke_meyer-technik_rgb.png',
              height: MediaQuery.of(context).size.height * 0.05,
              fit: BoxFit.cover,
            ),
          ),
          actions: [],
          centerTitle: true,
          elevation: 4,
        ),
        body: BackgroundContainer(
          child: Column(
            children: [
              Expanded(
                child: FutureBuilder(
                    future: getChargingHistory(),
                    builder: (context, querySnapshot) {
                      if (querySnapshot.connectionState ==
                          ConnectionState.done) {
                        return ListView.builder(
                            itemCount: qn.docs.length,
                            itemBuilder: (BuildContext context, index) {
                              return ListTile(
                                  title: Text('${qn.docs.data['Endzeit'].toString()}'));
                              //Text(doc['Endzeit']);
                            }
                        );
                      } else {
                        return Center(
                          child: CircularProgressIndicator(),
                        );
                      }
                    }),
              ),

Answer 1

首先，您将 async/await 与 .then 混合。您不需要 var qn;，只需 return 来自 getChargingHistory 的 await 的结果，例如：

Future<QuerySnapshot> getChargingHistory() async {
    return await users
        .doc('$currentUser')
        .collection('chargingHistory')
        .get();
  }

其次，您必须在itemBuilder中使用index来获取当前ListTile的数据。尝试：

return ListView.builder(
    itemCount: querySnapshot.docs.length,
    itemBuilder: (BuildContext context, index) {
        return ListTile(title:
            Text('${querySnapshot
                .docs[index]['Endzeit'].toString()}'));

Answer 2

不要使用 querySnapshot.connectionState==ConnectionState.done，请尝试使用 querySnapshot.hasData==true。

Listview 构建器与 future 构建器一起使用来自 firestore 的数据

Listview builder using with future builder with data from firestore

firebase

flutter

flutter-futurebuilder