SwiftUI加载SwiftData/磁盘图片时显示卡顿问题求助

从SwiftData或磁盘加载图片到LazyVGrid时，添加resizable()及frame修饰符会出现加载慢、滚动卡顿，但从Asset Catalog加载大图片却运行正常，核心原因是：磁盘/SwiftData加载的UIImage是原始尺寸，每次渲染都要实时重绘缩放，而Asset Catalog的图片会被系统自动预处理（根据设备分辨率缓存适配尺寸的版本），无需实时计算。

以下是具体优化建议：

1. 提前预处理图片尺寸 #

不要直接存储原始尺寸图片，保存时就将图片缩放到网格单元格的目标尺寸（比如300x300），加载后无需实时缩放，彻底避免重绘开销。

示例缩放方法：

extension UIImage {
    func scaled(to targetSize: CGSize) -> UIImage? {
        UIGraphicsBeginImageContextWithOptions(targetSize, false, UIScreen.main.scale)
        defer { UIGraphicsEndImageContext() }
        draw(in: CGRect(origin: .zero, size: targetSize))
        return UIGraphicsGetImageFromCurrentImageContext()
    }
}

保存图片时调用：

if let resizedImage = originalImage.scaled(to: CGSize(width: 300, height: 300)) {
    // 将resizedImage存入SwiftData或磁盘
}

2. 异步加载与后台解码 #

主线程加载解码图片会阻塞UI，用后台线程处理后再回到主线程更新视图，或者直接使用AsyncImage（支持本地文件URL）。

用AsyncImage加载本地URL #

AsyncImage(url: picPlace.imageFileURL) { image in
    image
        .resizable()
        .aspectRatio(1, contentMode: .fill)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .clipped()
} placeholder: {
    Color.gray.aspectRatio(1, contentMode: .fit)
}

后台解码SwiftData中的图片数据 #

@State private var loadedImage: UIImage?

// 在视图中添加task修饰符异步加载
.task {
    guard let imageData = picPlace.imageData else { return }
    await DispatchQueue.global(qos: .userInitiated).async {
        if let img = UIImage(data: imageData) {
            await MainActor.run {
                loadedImage = img
            }
        }
    }
}

// 渲染时使用加载后的图片
if let loadedImage = loadedImage {
    Image(uiImage: loadedImage)
        .resizable()
        .aspectRatio(1, contentMode: .fill)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .clipped()
} else {
    Color.gray.aspectRatio(1, contentMode: .fit)
}

3. 简化视图修饰符组合 #

原代码存在冗余的布局计算，aspectRatio(contentMode: .fill)与aspectRatio(1, contentMode: .fit)重复设置，简化后减少布局开销：

Image(uiImage: loadedImage)
    .resizable()
    .aspectRatio(1, contentMode: .fill) // 直接设置1:1比例+填充模式
    .frame(maxWidth: .infinity, maxHeight: .infinity)
    .clipped()

4. 实现内存缓存 #

用NSCache缓存已加载的图片，避免重复从磁盘/SwiftData读取解码：

class ImageCache {
    static let shared = ImageCache()
    private let cache = NSCache<NSString, UIImage>()
    
    func cacheImage(_ image: UIImage, forKey key: String) {
        cache.setObject(image, forKey: key as NSString)
    }
    
    func getCachedImage(forKey key: String) -> UIImage? {
        return cache.object(forKey: key as NSString)
    }
}

加载时先查缓存：

.task {
    let cacheKey = picPlace.id.uuidString // 用唯一ID作为缓存键
    if let cachedImage = ImageCache.shared.getCachedImage(forKey: cacheKey) {
        loadedImage = cachedImage
        return
    }
    
    guard let imageData = picPlace.imageData else { return }
    await DispatchQueue.global(qos: .userInitiated).async {
        if let img = UIImage(data: imageData) {
            ImageCache.shared.cacheImage(img, forKey: cacheKey)
            await MainActor.run {
                loadedImage = img
            }
        }
    }
}

5. 优化SwiftData存储方式 #

如果图片体积较大，不要在SwiftData中直接存储UIImage或Data，改为存储磁盘文件的URL，加载时用UIImage(contentsOfFile:)读取，系统会自动优化加载流程。

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