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

Question

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

我使用指令here 在启动时执行一个函数。在该函数中，我发出 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

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

  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”的信息