使用Flutter_Bloc等包，如何从纽约时报API嵌套列表获取media-metadata的URL？

1. 配置built_value类的嵌套关联 #

你需要在三个类中通过built_value的类型定义建立嵌套关联，注意把API的短横线命名（kebab-case）转成Dart的驼峰命名（camelCase）：

MediaMetadata类（对应API的media-metadata） #

import 'package:built_value/built_value.dart';
import 'package:built_value/serializer.dart';

part 'media_metadata.g.dart';

abstract class MediaMetadata implements Built<MediaMetadata, MediaMetadataBuilder> {
  String get url;

  MediaMetadata._();
  factory MediaMetadata([void Function(MediaMetadataBuilder) updates]) = _$MediaMetadata;

  static Serializer<MediaMetadata> get serializer => _$mediaMetadataSerializer;
}

Media类（对应API的media） #

import 'package:built_collection/built_collection.dart';
import 'package:built_value/built_value.dart';
import 'package:built_value/serializer.dart';
import 'media_metadata.dart';

part 'media.g.dart';

abstract class Media implements Built<Media, MediaBuilder> {
  BuiltList<MediaMetadata> get mediaMetadata; // 对应API的media-metadata字段

  Media._();
  factory Media([void Function(MediaBuilder) updates]) = _$Media;

  static Serializer<Media> get serializer => _$mediaSerializer;
}

基础文章类（对应API的result数组元素） #

import 'package:built_collection/built_collection.dart';
import 'package:built_value/built_value.dart';
import 'package:built_value/serializer.dart';
import 'media.dart';

part 'article.g.dart';

abstract class Article implements Built<Article, ArticleBuilder> {
  BuiltList<Media> get media; // 对应API的media数组

  // 其他文章字段（比如标题、内容等）按需添加
  String get title;

  Article._();
  factory Article([void Function(ArticleBuilder) updates]) = _$Article;

  static Serializer<Article> get serializer => _$articleSerializer;
}

2. 生成序列化代码 #

在终端执行build_runner命令，让built_value_generator自动生成序列化和反序列化的代码：

flutter pub run build_runner build --delete-conflicting-outputs

3. 解析API响应并提取图片URL #

在你的flutter_bloc逻辑中（比如Repository或者Bloc的事件处理方法里），将API返回的JSON解析为BuiltList<Article>，然后遍历提取所需的图片URL：

// 假设你已经获取到API的json响应（List<dynamic>类型）
final articles = serializers.deserialize(
  jsonResponse,
  specifiedType: const FullType(BuiltList, [FullType(Article)]),
) as BuiltList<Article>;

// 提取所有media-metadata的url（可按需筛选特定尺寸的metadata）
final List<String> imageUrls = [];
for (final article in articles) {
  for (final media in article.media) {
    final targetMetadata = media.mediaMetadata.firstOrNull;
    if (targetMetadata != null) {
      imageUrls.add(targetMetadata.url);
    }
  }
}

4. 在UI层展示图片 #

将提取到的imageUrls传入你的UI组件，用Image.network展示：

ListView.builder(
  itemCount: imageUrls.length,
  itemBuilder: (context, index) {
    return Image.network(imageUrls[index]);
  },
)

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