Flutter：在启​​动时执行一个函数 - 等待 HTTP 响应解析器提取图像 URL

Question

我正在开发一个 Flutter 应用程序，我需要从 API 中获取几乎所有内容，包括图像、颜色、文本等。所以我应该做的是构建应用程序的主要结构，然后用提供的信息填写所有内容应用程序接口。当应用程序开始获取响应并初始化变量以在应用程序中使用它们时，我有必要进行 API 调用 (HTTP GET)。

我使用这里的指令在启动时执行一个函数。在该函数中，我发出 HTTP GET 请求并解析 JSON 文件以提取我需要的信息。

但是，问题在于flutter不会等待HTTP请求的响应，以便我可以使用接收到的JSON中的解析信息。

因此，在下面的代码中，我使用 getdata() 函数来解析 JSON，以便从 JSON 文件中提取 ImageURL，然后使用 NetworkImage 中的 URL。

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(home: HomeScreen());
  }
}

class HomeScreen extends StatefulWidget {
  @override
  HomeScreenState createState() => new HomeScreenState();
}

class HomeScreenState extends State<HomeScreen>
    with AfterLayoutMixin<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    Size screenSize = MediaQuery.of(context).size;

    return Scaffold(
      body: (
      Image.Network(imageurl.toString())
      )
    );
  }
@override
  void afterFirstLayout(BuildContext context) {
    imageURL = getData().toString();
  }

  Future getData() async {
    var res = await http
        .get(Uri.encodeFull(link), headers: {"Accept": "application/json"});
    if (res.statusCode == 200) {
      var data = json.decode(res.body);
      var page = data["page"] as Map;
      var attributes = page["attributes"] as List;

      for (var i = 0; i < attributes.length; i++) {
        if (attributes[i]["key"] == "image") {
          return attributes[i]["value"];
        }
      }
    }
  }
}

在调试时，我意识到当 flutter 到达 getdata() 行时，它会执行 HTTP 请求，但由于它是异步的，它不会等待响应并继续构建应用程序（因此 imageURL 变量为空，因为JSON 尚未解析）。发生的情况是图像没有显示在它的位置。

提前致谢。

Answer 1

您的代码包含一些错误，但无论如何，您都可以使用 futureBuilder ，如果您确定 getData() 返回图像链接，然后将您的“构建”方法替换为：

  Widget build(BuildContext context) {
    Size screenSize = MediaQuery.of(context).size;

    return Scaffold(
        body: FutureBuilder<String>(
          future: getData(), // if you mean this method well return image url
          builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
            if(snapshot.connectionState == ConnectionState.done){
              return Image.network(snapshot.data);
            }else if(snapshot.connectionState == ConnectionState.waiting){
              return Text("loading ...");
             }
          },
        )
    );
  }

这段代码应该显示“正在加载”，直到 getData 方法完全执行，然后它会根据返回的 URL（应该是字符串）很好地显示图像 阅读更多关于“ FutureBuilder ”的信息