API 中的图像未显示在 flutter 应用程序中

Question

我想在我的 flutter 应用程序中显示来自 Unsplash API 的图像。我按照 YouTube 教程中的步骤操作，代码运行没有任何错误，但图像没有显示在应用程序中。

我已附上下面的代码（包含 unsplash API 的访问密钥。）

我希望输出是来自 Unsplash API 的图像列表。代码是在Android Studio中完成的。

我是 API 新手，希望得到任何帮助。

提前致谢。 `

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

class wpList extends StatefulWidget {
  @override
  _wpListState createState() => _wpListState();
}

class _wpListState extends State<wpList> {


  List data = [];
  List<String> wpUrl=[];
  bool showing = false;

  getData() async{
    http.Response response= await http.get(Uri.parse('https://api.unsplash.com/photos/?client_id=<api_access_key>'));
    data = json.decode(response.body);
    _assign();
    setState(() {
      showing = true;
    });
  }

  _assign(){
    for(var i=0; i<data.length; i++){
      wpUrl.add(data.elementAt(1)["urls"]["regular"]);
      print(wpUrl);
    }
  }

  @override
  Widget build(BuildContext context) {
    return  ListView.builder(
        itemCount: data.length,
        itemBuilder: (context, index){
          return Column(
            children: [
              SizedBox(
                height: 10,
              ),
              Expanded(
                  flex: 6,
                  //height: 50,
                  //color: Colors.amber,
                  child: Container(
                    child: !showing? CircularProgressIndicator():Image(image: NetworkImage(wpUrl.elementAt(index))),
                  )
              )
            ],
          );
        });
  }
}

`

这是我得到的输出

Answer 1

假设您已经拥有初始数据，您已经编写了很好的代码来显示数据。但你没有任何初始数据。当代码运行时，

data = []

是一个空列表，ListView构建器中的

data.length

不显示任何数据。

我们应该在渲染 ui 之前调用

getData()

（我们应该在渲染 ui 之前填充数据数组）。我们可以通过从 init 函数调用

getData()

来完成此操作，如下所示。

  @override
  initState() {
    super.initState();
    getData();
  }

但是在这种情况下，也有很小的机会无法显示图像。

原因：

您的 getData() 方法在异步线程中运行，因为它是异步函数。因此，

getData()

代码进入异步线程执行。但控件不会等待 

getData()

 完成并跳到下一行（在本例中为 build 方法）。

因此，仅当

getData()

 方法中的网络请求不会花费太多时间时，您的图像才会显示，以便在控件到达构建方法之前数据已初始化。

修复

1. 可以在setState(){}中初始化数据，以便在数据初始化时再次进行渲染

2. 您可以在

   initState()中调用await方法，以便控制等待，直到getData()函数完成执行。但是在这种情况下会出现错误，我们无法向 init 函数添加 async 修饰符，这可以使用下面的参考来解决。 https://www.fluttercampus.com/guide/63/how-to-run-async-await-code-in-initstate-flutter-app/

Answer 2

您从未调用函数来获取数据

API 调用通常从

initState

 完成（

有关 initState 的更多信息） 尝试将其添加到您的 build

 方法

上方

@override
  initState() {
    super.initState();
    getData();
  }