带有动态列表的 Futurebuild答案

【问题标题】：Futurebuild with dynamic list带有动态列表的 Futurebuild
【发布时间】：2022-01-06 21:11:15
【问题描述】：

我有一个函数，它需要一些 json 并将整个对象放入一个动态列表中。我无法使用 futurebuilder 循环遍历该列表。我总是得到“没有为类 'Future 定义 getter 'length'”错误。标题也一样。

这样做的正确方法是什么？在 futurebuilder 或 listbuilder 中访问此列表。

非常感谢。

  class _HomeScreenState extends State<HomeScreen> {
      final storage = new FlutterSecureStorage();

      Future<List<dynamic>> _loadedProducts;
       @override
      void initState() {
     _loadedProducts = _getPolicy();
      super.initState();

 }


  Future<void> _getPolicy() async {
  final url = Uri.parse('https://jsonplaceholder.typicode.com/todos/1');

try {
  final response = await http.get(url);
  final extractedData = json.decode(response.body);


  final List<dynamic> loadedProducts = [];
  extractedData.forEach((prodId, prodData) {
    loadedProducts.addAll(extractedData);
  });
 
   _loadedProducts = loadedProducts;
   print(_loadedProducts);
 

} catch (error) {
  print('---error-');
  throw (error);
}

}

这是futurebuilder的代码

FutureBuilder<List<dynamic>>(
            future: _loadedProducts,
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return AnimatedList(
                  initialItemCount: snapshot.data.length,
                  itemBuilder:
                      (BuildContext context, int index,
                      Animation animation) {
                    return new Text(_loadedProducts.title.toString());
                  },
                );
              } else if (snapshot.hasError) {
                return Text("${snapshot.error}");
              }

              // By default, show a loading spinner.
              return CircularProgressIndicator();
            },
          );

【问题讨论】：

标签： android list flutter dart mobile-development

【解决方案1】：

您需要在 _getPolicy() 未来函数中返回该列表。所以试着像这样改变它：

  Future<List<dynamic>> _getPolicy() async {
    final url = Uri.parse('https://jsonplaceholder.typicode.com/todos');

    try {
      final response = await http.get(url);
      return json.decode(response.body);

    } catch (error) {
      print('---error-');
      rethrow;
    }
  }

我改变了什么：在您的网址中，您只得到一个待办事项，所以我从您的网址中删除了/1。相反，如果您想使用userId=1 获取用户的所有待办事项，那么您可以将 url 更改为以下内容

https://jsonplaceholder.typicode.com/todos?userId=1

另外，json.decode() 已经返回一个列表，所以不需要你的forEach

此外，您需要修复动画列表中的文本小部件，因为您不能使用_loadedProducts.title。您需要在此处使用快照数据。这是经过几次修复后的 FutureBuilder 代码：

    FutureBuilder<List<dynamic>>(
      future: _loadedProducts,
      builder: (context, AsyncSnapshot<List<dynamic>> snapshot) {
        if (snapshot.hasData && snapshot.data != null && snapshot.data!.isNotEmpty) {
          return AnimatedList(
            initialItemCount: snapshot.data!.length,
            itemBuilder:
                (BuildContext context, int index,
                Animation animation) {
              return new Text(snapshot.data![index]['title']);
            },
          );
        } else if (snapshot.hasError) {
          return Text("${snapshot.error}");
        }

        // By default, show a loading spinner.
        return CircularProgressIndicator();
      },
    );

Here's a working demo

【讨论】：

太棒了，谢谢！！
不客气 :)