来自API的图像未在Flutter应用程序中显示

t1qtbnec  于 2023-01-02  发布在  Flutter
关注(0)|答案(2)|浏览(148)

我想在我的Flutter应用程序中显示API中的图像。我按照YouTube教程中的步骤操作,代码运行没有任何错误,但图像没有在应用程序中显示。
我已经附上了下面的代码(<api_access_key>包含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))),
                  )
              )
            ],
          );
        });
  }
}

'
This is the output that I got

z9smfwbn

z9smfwbn1#

假设您已经有了初始数据,您已经编写了很好的代码来显示数据。但是您没有任何初始数据。当代码运行时,data = []是一个空列表,并且ListView构建器中的data.length不显示任何数据。
我们应该在渲染用户界面之前调用getData()(我们应该在渲染用户界面之前填充数据数组)。我们可以通过从init函数调用getData()来实现这一点,如下所示。

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

但是,在这种情况下,图像显示的可能性也很小。

    • 原因:**

getData()方法运行在异步线程中,因为它是一个异步函数。因此,getData()代码进入异步线程执行。但控件不会等待getData()完成,而是跳到下一行(在本例中为build方法)。
因此,只有当getData()方法中的网络请求不会花费太多时间,以便在控件到达构建方法之前初始化数据时,才会显示图像。

    • 修复**

1.您可以初始化setState(){}内的数据,以便在初始化数据时再次进行呈现
1.您可以在**initState()内调用await方法,以便控件等待,直到getData()**函数执行完毕。但在这种情况下,您会遇到错误,即我们无法向init函数添加异步修饰符,这可以使用以下参考来解决。https://www.fluttercampus.com/guide/63/how-to-run-async-await-code-in-initstate-flutter-app/

    • 请投赞成票并接受有用的答案**
5us2dqdw

5us2dqdw2#

您从未调用函数来获取数据
API调用通常从initStatemore about initState)执行。请尝试在build方法上方添加此函数

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

相关问题