我想在我的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))),
)
)
],
);
});
}
}
2条答案
按热度按时间z9smfwbn1#
假设您已经有了初始数据,您已经编写了很好的代码来显示数据。但是您没有任何初始数据。当代码运行时,
data = []
是一个空列表,并且ListView构建器中的data.length
不显示任何数据。我们应该在渲染用户界面之前调用
getData()
(我们应该在渲染用户界面之前填充数据数组)。我们可以通过从init函数调用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/
5us2dqdw2#
您从未调用函数来获取数据
API调用通常从
initState
(more about initState)执行。请尝试在build
方法上方添加此函数