带有动态列表的 Futurebuild

Question

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

正确的做法是什么？在 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();
            },
          );

Answer 1

您需要 return 您 _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;
    }
  }

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

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

此外，json.decode() 已经 return 是一个列表，因此不需要您的 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

带有动态列表的 Futurebuild

Futurebuild with dynamic list

android

list

dart

mobile-development

flutter