Flutter 使用 FutureBuilder 检索列表中的数据

Question

目前我正在尝试了解使用 flutter 和 firestore 检索数据的一些基础知识。在我的例子中，我想检索一次数据，所以我决定选择 FutureBuilder 而不是 StreamBuilder。

现在，当我在我的小部件树中放置一个打印语句时，我注意到，每次我调用我的函数时，整个树当然都在重建。现在我想使用 Consumer，以便只有我的 Listview.Builder 重新加载，但我无法正常工作。小部件树仍在重建中。希望有人能帮助我。

Consumer<SongProvider>(builder: (context, sProvider, _) {
                  return FutureBuilder(
                      future: songFuture,
                      builder: (context, snapshot) {
                      

                          switch (snapshot.connectionState) {
                            case ConnectionState.none:
                            case ConnectionState.waiting:
                              return Align(
                                alignment: Alignment.center,
                                child: CircularProgressIndicator()
                              );
                            case ConnectionState.done:
                              if (snapshot.hasError) {
                                return Text('Error: ${snapshot.error}');
                              } else {

                                return ListView.builder(
                          itemCount: snapshot.data.length,
                          itemBuilder: (context, index) {
                            return Text(
                                snapshot.data[index]['songName'].toString());
                          });
                              }
                          }

                          
                    }
                  );
            }))
      ],
    )));
  }
}

我怎样才能使 Consumer 正常工作？我想我可能需要用快照替换它，但我不知道我是如何以及从哪里获取数据的。请帮忙

Answer 1

为未来创建一个属性 as Future<dynamic> yourDataFuture; 并在 initState 中将其初始化为

void initState() {
   super.initState();
   yourDataFuture= getData(); // get Data will returns a future
}

然后将此变量作为 future 分配给 FutureBuilder as

...... rest of the code...

future: yourDataFuture,

....... rest of the code....

您还需要处理 ConnectionStates 以防止多次调用。在您的代码中，未来的构建器将调用 3 次。 none 一次，waiting 第二次，done.Read 第三次。因此，当连接状态达到 done

时构建列表

Flutter 使用 FutureBuilder 检索列表中的数据

Flutter retrieve data in a List with FutureBuilder

firebase

flutter

google-cloud-firestore

flutter-provider