flutter - 如何使用 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在加载所有卡片之前拥有一个小部件。

我怎么做？

由于代码非常大，我不确定我应该在这里包含什么。因此，如果您需要查看任何代码来回答，我会将其添加到帖子中。

标签： flutter

Answer 1

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

Future<String> isDataLoaded;

在 initState() 中：

isDataLoaded = getImages();

在视图中：

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