SwiftUI中如何从CloudKit获取CKAsset图片并在ForEach中展示

核心问题分析 #

你的代码中直接在Image初始化器里调用异步方法getGameImageFromCloud是行不通的——Image需要同步获取的UIImage，但该方法通过闭包异步返回图片，无法直接赋值给初始化器参数。要解决这个问题，需要把异步加载的图片存储到ViewModel的可观察属性中，通过属性更新触发视图刷新。

解决方案步骤 #

1. 在ViewModel中添加图片缓存

在你的GamesViewModel里，新增一个@Published修饰的字典，用来缓存已加载的游戏图片，键用Game的唯一标识（比如你用的iconImageURL）：

class GamesViewModel: ObservableObject {
    // 其他已有属性...
    @Published var games: [Game] = []
    @Published var gameImages: [String: UIImage] = [:] // 以iconImageURL为键存储图片
}

2. 封装图片加载逻辑，更新缓存

在ViewModel中新增方法，调用你的getGameImageFromCloud并将返回的图片存入缓存，避免重复加载：

func loadGameImage(for game: Game) {
    guard let imageID = game.iconImageURL else {
        // 无图片ID时直接存入默认图
        gameImages[game.id.uuidString] = AppImages.gameDefaultImage
        return
    }
    
    // 已缓存则跳过加载
    guard gameImages[imageID] == nil else { return }
    
    getGameImageFromCloud(for: game) { [weak self] image in
        guard let self = self else { return }
        self.gameImages[imageID] = image
    }
}

3. 修改SwiftUI视图，使用缓存图片

在ForEach中，根据缓存状态显示图片：已缓存则显示对应图片，否则显示默认图并触发加载：

//Background Tab View
TabView(selection: $gamesViewModel.currentIndex) {
    ForEach(gamesViewModel.games.indices, id: \.self) { index in
        let game = gamesViewModel.games[index]
        GeometryReader { proxy in
            Group {
                if let imageID = game.iconImageURL, let image = gamesViewModel.gameImages[imageID] {
                    Image(uiImage: image)
                } else {
                    Image(uiImage: AppImages.gameDefaultImage)
                        .onAppear {
                            gamesViewModel.loadGameImage(for: game)
                        }
                }
            }
            .resizable()
            .aspectRatio(contentMode: .fill)
            .frame(width: proxy.size.width, height: proxy.size.height)
            .cornerRadius(1)
        }
        .ignoresSafeArea()
        .offset(y: -100)
    }
}
.tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
.animation(.easeInOut, value: gamesViewModel.currentIndex)
.overlay(
    LinearGradient(colors: [
        Color.clear,
        Color.black.opacity(0.2),
        Color.white.opacity(0.4),
        Color.white,
        Color.systemPurple,
        Color.systemPurple
    ], startPoint: .top, endPoint: .bottom)
)
.ignoresSafeArea()

额外优化建议 #

• 优先使用ForEach(gamesViewModel.games) { game in }而非索引遍历，更符合SwiftUI数据流规范，也能避免索引越界问题。
• 可以给Game实体添加计算属性，统一返回图片的唯一标识（比如imageIdentifier），简化缓存键的处理。
• 对于iOS 15及以上版本，也可以使用AsyncImage，但需要将CKAsset的临时fileURL复制到沙盒目录，生成持久化URL后再传入。

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