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

Question

目前我正在尝试了解使用颤振和 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

为未来创建一个属性为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时建立列表