Listview 构建器与未来构建器一起使用来自 firestore 的数据答案

【问题标题】：Listview builder using with future builder with data from firestoreListview 构建器与未来构建器一起使用来自 firestore 的数据
【发布时间】：2021-11-22 21:33:00
【问题描述】：

我正在尝试使用 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(),
                        );
                      }
                    }),
              ),

【问题讨论】：

您是否从打印功能获得请求响应？
@Jahidul Islam 是的，当我使用这个时：qn.docs.forEach((doc) { print(doc['Endzeit']); }); 我得到了我想要的东西，但我无法通过 ListView.builder 得到它

标签： firebase flutter flutter-futurebuilder

【解决方案1】：

首先，您将async/await 与.then 混合在一起。您不需要var qn;，只需从您的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()}'));

【讨论】：

非常感谢你！我实际上需要将未来的返回存储在变量中，我不知道为什么我不能使用querySnapshot.docs.length。但对我来说完全没问题。

【解决方案2】：

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

【讨论】：