如何访问模型类gallery变量的列表元素 按链接展示对应图片

我发起API请求获取返回数据，已创建对应的模型类存储接收到的数据值，使用gallery变量存储图片链接组成的列表，请问如何访问gallery列表中的元素，从而通过链接加载展示对应图片？

已定义User模型 #

class User {
  final int id;
  final List<PhotoModel>? gallery;

  User({
    required this.id,
    this.gallery,
  });

  factory User.fromJson(Map<String, dynamic> json) {
    List<PhotoModel> ph = [];
    json['gallery'].forEach((v) {
      ph.add(PhotoModel.fromJson(v));
    });

    return User(
      id: json['id'] as int,
      gallery: ph,
    );
  }
}

已定义PhotoModel模型 #

class PhotoModel {
  final String url;

  PhotoModel({required this.url});

  factory PhotoModel.fromJson(Map<String, dynamic> json) {
    return PhotoModel(
      url: json['url'],
    );
  }
}

当前运行效果 #

gallery是User类下的可空List<PhotoModel>类型属性，访问列表元素直接通过下标获取即可，注意列表下标从0开始计数，取值前必须做判空处理，避免空指针报错。

基础访问方式 #

假设你已经拿到解析完成的User实例对象：

• 获取第1张图片的链接：user.gallery?[0].url
• 获取第i张图片的链接：user.gallery?[i-1].url

图片渲染实现 #

推荐用GridView做网格布局批量展示所有图片，使用cached_network_image组件处理网络图片加载，自带缓存、加载态、错误态兜底能力。

1. 先在pubspec.yaml添加依赖：

dependencies:
  flutter:
    sdk: flutter
  cached_network_image: ^3.3.1

2. 编写渲染代码：

// gallery为空时的占位
if (user.gallery == null || user.gallery!.isEmpty) {
  return const Center(child: Text("暂无图片"));
}

// 网格展示全部图片
return GridView.builder(
  padding: const EdgeInsets.all(8),
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3, // 每行显示3张
    crossAxisSpacing: 4,
    mainAxisSpacing: 4,
  ),
  itemCount: user.gallery!.length,
  itemBuilder: (context, index) {
    final currentPhoto = user.gallery![index];
    return CachedNetworkImage(
      imageUrl: currentPhoto.url,
      fit: BoxFit.cover,
      placeholder: (context, url) => const Center(
        child: CircularProgressIndicator(strokeWidth: 2),
      ),
      errorWidget: (context, url, error) => const Icon(Icons.broken_image),
    );
  },
);

如果只需要展示单张图片，直接取对应下标的url传入组件即可：

// 展示列表第一张图
if (user.gallery?.isNotEmpty ?? false) {
  return CachedNetworkImage(imageUrl: user.gallery![0].url);
}

修复现有模型的边界问题 #

你当前写的User.fromJson解析方法没有处理接口返回gallery字段为null的场景，接口如果没返回该字段会直接抛错，建议修改解析逻辑：

factory User.fromJson(Map<String, dynamic> json) {
  List<PhotoModel> ph = [];
  // 字段非空时才做遍历解析
  if (json['gallery'] != null) {
    json['gallery'].forEach((v) {
      ph.add(PhotoModel.fromJson(v));
    });
  }
  return User(
    id: json['id'] as int,
    gallery: ph.isNotEmpty ? ph : null,
  );
}

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