如何使用ListView.builder管理状态？

Question

因此，我正在尝试制作一个从API请求图像的应用。在请求完成之前，该应用会显示错误（红色背景和黄色字母），但是一旦加载，就可以正确显示窗口小部件。

这里的每张卡都由ListView.builder小部件呈现，在该小部件中传递每张卡的数据。可以通过请求图像API来访问卡的图像，其中我通过传递查询词（在本例中为国家/地区名称）来随机选择图像。

我执行此操作的方式（不确定是否是正确的方式）是通过使用getImage方法（在请求完成后调用了setState的方法），即在小部件的initState()中调用。

这是我的卡片小部件代码的一部分：

  String _img;
  bool isLoading = true;

  Future<String> getImage() async {
    String imgURL = await PexelAPI.getImage(widget._country);
    setState(() {
      _img = imgURL;
      isLoading = false;
    });

    return "Data loaded";
  }

  @override
  void initState() {
    super.initState();
    this.getImage();
  }

我想做的是访问isLoading，因此在装入所有卡之前，我可以拥有一个CircularProgressIndicator小部件。

我该怎么做？

由于代码很大，所以我不确定应该在此处包含什么。因此，如果您需要查看任何要回答的代码，我将其添加到帖子中。

Answer 1

您是否尝试过在视图中使用FutureBuilder？像这样：

Future<String> isDataLoaded;

在initState（）中：

isDataLoaded = getImages();

在视图中：

FutureBuilder(
      future: isDataLoaded,
      builder: (BuildContext context, AsyncSnapshot snapshot) {
       return snapshot.hasData 
       ? WIDGET 
       : CircularProgressIndicator();              
      }