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

Posted 2023-02-23

【中文标题】Flutter 使用 FutureBuilder 检索列表中的数据

【英文标题】：Flutter retrieve data in a List with FutureBuilder

【发布时间】：2021-03-24 23:31:45

【问题描述】：

目前我正在尝试了解使用颤振和 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 现在工作？我想我可能需要用快照替换它，但我不知道我如何以及从哪里获取数据。请帮忙

【问题讨论】：

只有当你的小部件在你的提供者之下时，消费者才能工作，你可以在这里阅读更多：medium.com/flutter-community/…

感谢您提供来源。我编辑了我的代码，我可以假设我在我的小部件树上方使用 ChangenotifierProvider

【参考方案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时建立列表

【讨论】：

嘿，谢谢你的代码。我编辑了我的问题。我处理了连接状态，现在它只在完成时加载。无论如何，我现在如何让消费者工作？我想我可能需要用快照替换它，但我不知道我如何以及从哪里获取数据。请帮忙

你想将Consumer用于什么目的？

我只想在数据发生变化时重建listviewbuilder而不是重建整个页面

pub.dev/documentation/provider/latest/provider/… 您没有以正确的方式使用消费者。将您的小部件树的其余部分作为消费者的子级并在消费者的构建器中列出。阅读以上链接

我认为它现在是正确的，我在我的应用程序顶部实现了 changenotifierprovider。现在文档告诉消费者应该在最接近具有数据的小部件的位置。现在我们必须更改 snapshot.data[index]['songName'].toString());到 sProvider.foo.value 。但我不知道我是否也必须更改所有快照变量，例如在 FutureBuilder 构建器中： (context, snapshot) 并且我没有从 db.getSongsOnce(); 收到任何值；获取 sProvider.foo.value