Flutter应用中无法显示Unsplash API返回的图片

问题说明 #

按照YouTube教程编写Flutter代码调用Unsplash API展示图片，程序无报错但图片无法显示。开发环境为Android Studio，代码如下，预期展示Unsplash返回的图片列表：

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))),
                  )
              )
            ],
          );
        });
  }
}

错误原因分析 #

1. 未发起API请求：getData()方法未在组件初始化阶段调用，导致从未向Unsplash API请求数据，data和wpUrl始终为空，界面无有效内容显示。
2. URL获取逻辑错误：_assign()方法中循环时，固定获取data.elementAt(1)的图片URL，而非当前循环索引i对应的图片，会导致所有列表项重复同一张图（甚至当数据长度不足时引发错误）。
3. 布局约束冲突：在ListView.builder的列表项中，将Expanded嵌套在Column内，ListView的滚动特性会与Expanded的布局约束冲突，导致图片无法正确渲染。

修复后的代码 #

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;

  @override
  void initState() {
    super.initState();
    // 初始化时触发API请求
    getData();
  }

  getData() async {
    try {
      final response = await http.get(
        Uri.parse('https://api.unsplash.com/photos/?client_id=<api_access_key>'),
      );
      // 校验请求状态
      if (response.statusCode == 200) {
        setState(() {
          data = json.decode(response.body);
          _assign();
          showing = true;
        });
      } else {
        print('请求失败，状态码：${response.statusCode}');
      }
    } catch (e) {
      print('请求异常：$e');
    }
  }

  _assign() {
    wpUrl.clear(); // 清空旧数据避免重复添加
    for (var i = 0; i < data.length; i++) {
      // 按循环索引获取对应图片URL
      wpUrl.add(data[i]["urls"]["regular"]);
    }
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      padding: EdgeInsets.all(10),
      itemCount: showing ? wpUrl.length : 1,
      itemBuilder: (context, index) {
        if (!showing) {
          return Center(child: CircularProgressIndicator());
        }
        return Column(
          children: [
            SizedBox(height: 10),
            // 移除Expanded，设置固定高度并添加加载/错误状态处理
            Container(
              height: 200,
              child: Image.network(
                wpUrl[index],
                fit: BoxFit.cover,
                loadingBuilder: (context, child, loadingProgress) {
                  if (loadingProgress == null) return child;
                  return Center(child: CircularProgressIndicator());
                },
                errorBuilder: (context, error, stackTrace) {
                  return Center(child: Text('图片加载失败'));
                },
              ),
            ),
          ],
        );
      },
    );
  }
}

补充说明 #

• 替换代码中的<api_access_key>为你在Unsplash开发者平台申请的有效访问密钥。
• 确保Android项目的AndroidManifest.xml中添加网络权限：

  <uses-permission android:name="android.permission.INTERNET"/>
  

• Unsplash API有调用频率限制，频繁请求可能会被限制访问，需注意调用频次。

内容的提问来源于stack exchange，提问作者kkridhi