iOS 16中List内的AsyncImage显示异常问题咨询

开发者阿泽

2026-8-11

问题描述

以下代码在Xcode 14.1、iOS 16.1模拟器中运行时，滚动List组件时AsyncImage偶尔无法显示已下载的图片，取而代之的是灰色矩形：

struct Item: Identifiable {
    let id: String
    let url = URL(string: "https://styles.redditmedia.com/t5_j6lc8/styles/communityIcon_9uopq0bazux01.jpg")!
}

struct Content: View {

    let model: [Item] = {
        var model = [Item]()
        for i in 0 ..< 100 {
            model.append(.init(id: String(i)))
        }
        return model
    }()

    var body: some View {
        List(model) { item in
            Row(item: item)
        }
    }

}

struct Row: View {

    let item: Item

    var body: some View {
        AsyncImage(url: item.url)
    }

}

原因与解决方案

这是iOS 16.1和Xcode 14.1中的已知系统Bug，并非代码实现遗漏。该问题源于List的单元格复用机制与AsyncImage的缓存、渲染逻辑存在冲突，快速滚动时易出现加载状态异常。

可通过以下方式缓解或解决：

指定AsyncImage固定尺寸：给AsyncImage添加frame或结合resizable设置尺寸限制，让List能明确单元格布局，减少复用阶段的渲染异常：
```
AsyncImage(url: item.url) { image in
    image.resizable()
        .scaledToFit()
} placeholder: {
    Color.gray
}
.frame(width: 50, height: 50)
```

强制优先读取缓存：设置缓存策略为.returnCacheDataElseLoad，确保已下载的图片优先从缓存读取，避免重复请求或渲染异常：

AsyncImage(url: item.url, cachePolicy: .returnCacheDataElseLoad) { image in
    image.resizable().scaledToFit()
} placeholder: {
    Color.gray
}
.frame(width: 50, height: 50)