如何从Rick and Morty API创建图片列表并遍历展示？

代码问题修正点 #

• NetworkImage使用错误：它是图片提供者，不能直接作为Widget渲染，需用Image.network()或Image组件包裹
• API数据访问错误：Rick and Morty API返回的角色列表存在results字段中，需通过list.results访问，而非直接操作list
• CarouselSlider参数缺失：必须配置options参数定义轮播基础行为
• 状态处理不全：补充加载中、请求失败的UI状态，提升页面健壮性

完整修复代码 #

import 'package:apirick/models/dataapi.dart';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
import 'dart:convert';
import 'package:http/http.dart' as http;

class Api extends StatefulWidget {
  const Api({Key? key}) : super(key: key);

  @override
  State<Api> createState() => _ApiState();
}

class _ApiState extends State<Api> {
  Future<DataApi> fetchapi() async {
    final response =
        await http.get(Uri.parse('https://rickandmortyapi.com/api/character'));
    
    if (response.statusCode == 200) {
      return DataApi.fromJson(json.decode(response.body));
    } else {
      throw Exception('Failed to load characters');
    }
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<DataApi>(
      future: fetchapi(),
      builder: (BuildContext context, AsyncSnapshot<DataApi> snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return const Center(child: CircularProgressIndicator());
        } else if (snapshot.hasError) {
          return Center(child: Text('Error: ${snapshot.error}'));
        } else if (snapshot.hasData) {
          final characterList = snapshot.data!.results;

          return CarouselSlider.builder(
            itemCount: characterList.length,
            itemBuilder: (BuildContext context, int index, int realIndex) {
              return Container(
                width: double.infinity,
                margin: const EdgeInsets.symmetric(horizontal: 5.0),
                child: Image.network(
                  characterList[index].image,
                  fit: BoxFit.cover,
                  errorBuilder: (context, error, stackTrace) {
                    return const Center(child: Icon(Icons.error));
                  },
                ),
              );
            },
            options: CarouselOptions(
              height: 400.0,
              autoPlay: true,
              autoPlayInterval: const Duration(seconds: 3),
              enlargeCenterPage: true,
              viewportFraction: 0.8,
            ),
          );
        } else {
          return const Center(child: Text('No data available'));
        }
      },
    );
  }
}

额外说明 #

• 确保DataApi模型类正确解析API结构，results字段需定义为包含角色对象的列表，每个角色对象要有image属性
• 新增errorBuilder处理图片加载失败场景，优化用户体验
• 补充完整CarouselOptions配置，保证轮播功能正常运行

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