如何借助flutter_photo_manager通过ID加载并展示相册图片？

问题核心是AssetEntity.fromId返回异步的Future<AssetEntity?>，而AssetEntityImageProvider需要同步的AssetEntity实例，不能在build方法的for循环中直接使用await。以下是两种可行的解决方案：

方案一：提前批量加载AssetEntity（推荐） #

这种方法在获取媒体列表时，同时批量获取对应的AssetEntity，避免在build阶段处理多个异步请求，性能更优。

1. 先定义一个组合类，关联媒体数据和对应的AssetEntity：

class MediaWithAsset {
  final RetrievedMedia media;
  final AssetEntity asset;

  MediaWithAsset(this.media, this.asset);
}

2. 修改futureClusterSamples的类型和初始化逻辑，批量获取AssetEntity：

late Future<List<MediaWithAsset>> futureClusterSamples;

@override
void initState() {
  super.initState();
  // 替换你原来初始化futureClusterSamples的代码，示例如下
  futureClusterSamples = fetchClusterSamples().then((mediaList) async {
    // 批量调用AssetEntity.fromId，用Future.wait等待所有请求完成
    final assets = await Future.wait(
      mediaList.map((media) => AssetEntity.fromId(media.localId)),
    );
    // 组合媒体数据和对应的AssetEntity，同时处理可能的null情况
    return mediaList.asMap().entries.map((entry) {
      final media = entry.value;
      final asset = assets[entry.key];
      if (asset == null) {
        throw Exception('无法加载ID为${media.localId}的图片');
      }
      return MediaWithAsset(media, asset);
    }).toList();
  });
}

3. 在FutureBuilder中直接使用已加载的AssetEntity：

FutureBuilder<List<MediaWithAsset>>(
  future: futureClusterSamples,
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return Column(
        children: [
          for (var item in snapshot.data!)
            Image(
              image: AssetEntityImageProvider(
                item.asset,
                isOriginal: false,
                thumbnailSize: const ThumbnailSize.square(200),
                thumbnailFormat: ThumbnailFormat.jpeg,
              ),
            )
        ],
      );
    } else if (snapshot.hasError) {
      return Text('${snapshot.error}');
    }
    return const CircularProgressIndicator();
  },
)

方案二：单个图片用FutureBuilder处理 #

如果不想修改原有的媒体列表获取逻辑，可以给每个图片单独套一个FutureBuilder，处理单个AssetEntity的异步加载：

FutureBuilder<List<RetrievedMedia>>(
  future: futureClusterSamples,
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return Column(
        children: [
          for (var retrEnt in snapshot.data!)
            FutureBuilder<AssetEntity?>(
              future: AssetEntity.fromId(retrEnt.localId),
              builder: (context, assetSnapshot) {
                if (assetSnapshot.hasData && assetSnapshot.data != null) {
                  return Image(
                    image: AssetEntityImageProvider(
                      assetSnapshot.data!,
                      isOriginal: false,
                      thumbnailSize: const ThumbnailSize.square(200),
                      thumbnailFormat: ThumbnailFormat.jpeg,
                    ),
                  );
                } else if (assetSnapshot.hasError) {
                  return Text('加载图片失败: ${assetSnapshot.error}');
                }
                // 单个图片加载中的占位
                return const SizedBox(
                  width: 200,
                  height: 200,
                  child: CircularProgressIndicator(),
                );
              },
            )
        ],
      );
    } else if (snapshot.hasError) {
      return Text('${snapshot.error}');
    }
    return const CircularProgressIndicator();
  },
)

两种方案对比 #

• 方案一：批量加载，减少异步请求的重复开销，整体加载更高效，适合媒体数量较多的场景。
• 方案二：无需修改原有数据结构，实现简单，但每个图片单独处理异步，会出现多个加载指示器，性能略差。

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