SwiftUI跨视图更新Wine对象图片不实时显示问题排查

问题现象 #

• 在WineInfoView中为酒品添加新图片后，视图无法自动刷新，看不到新增的图片
• 在NewWineView中给空Wine对象添加首张图片时，必须选择第二张图片后，首张图片才会显示

问题根源 #

1. Wine类未实现响应式通知：Wine作为class类型，没有遵循ObservableObject协议，也未用@Published标记images数组属性。当修改wine.images时，SwiftUI无法感知到数据变化，因此不会触发视图刷新。
2. 状态包装器使用错误：
   • WineInfoView中用@State管理引用类型的Wine实例，@State仅适合值类型，无法正确监听引用类型内部的属性变化。
   • NewWineView中用@State管理ObservableObject类型的Wine实例，应该用@StateObject来确保实例生命周期与视图绑定，并监听其内部变化。
3. 异步操作未在主线程更新UI：从相册加载图片的异步操作在后台线程执行，直接修改wine.images可能导致UI更新不及时。

解决方法 #

1. 改造Wine类为响应式对象 #

让Wine遵循ObservableObject，并将images标记为@Published，这样属性变化时会自动通知SwiftUI刷新视图：

class Wine: Identifiable, ObservableObject {
    var type: String
    var vintage: String
    var vineyard: Vineyard
    @Published var images: [UIImage]
    var cloudID: String
    var recordID: CKRecord.ID
    let id: UUID = UUID()
    
    init(_ type: String,_ vintage: String,_ vineyard: Vineyard,_ images: [UIImage] = [],_ cloudID: String = "",_ recordID: CKRecord.ID = CKRecord(recordType: "Wine").recordID) {
        self.type = type
        self.vintage = vintage
        self.vineyard = vineyard
        self.images = images
        self.cloudID = cloudID
        self.recordID = recordID
    }
    
    init() {
        self.type = ""
        self.vintage = ""
        self.vineyard = Vineyard()
        self.images = []
        let record = CKRecord(recordType: "Wine")
        self.cloudID = record.recordID.recordName
        self.recordID = record.recordID
    }
    
    init(_ ckrecord: CKRecord) async throws {
        self.type = ckrecord["Type"] as! String
        self.vintage = ckrecord["Vintage"] as! String
        self.cloudID = ckrecord.recordID.recordName
        self.recordID = ckrecord.recordID
        let imageAssets = ckrecord["Pictures"] as! [CKAsset]
        var uiImages: [UIImage] = []
        var imageData = Data()
        for asset in imageAssets {
            do {
                imageData = try Data(contentsOf: asset.fileURL!)
                uiImages.append(UIImage(data: imageData)!)
            }
            catch {
                print(error)
            }
        }
        self.images = uiImages
        self.vineyard = Vineyard()
        let vineyardRef = ckrecord["Vineyard"] as! CKRecord.Reference
        let cloudDB = CKContainer.default().publicCloudDatabase
        Task {
            do {
                let fetchedRecord = try await cloudDB.record(for: vineyardRef.recordID)
                self.vineyard = Vineyard(fetchedRecord)
            } catch {
                print("Error fetching record: \(error.localizedDescription)")
            }
        }
    }
}

2. 修正视图中的状态包装器 #

• WineInfoView：将@State改为@Binding，适配从父视图传递的绑定值：

struct WineInfoView: View {
    @Binding var wine: Wine
    var body: some View {
        HorizontalImageScrollView(wine: $wine)         
    }
}

• NewWineView：将@State改为@StateObject，正确管理ObservableObject实例：

struct NewWineView: View {
    @StateObject private var wine: Wine = Wine()
    var body: some View {
        HorizontalImageScrollView(wine: $wine)
    }
}

3. 确保异步操作在主线程更新UI #

在HorizontalImageScrollView的图片选择回调中，用MainActor.run包裹UI相关的数据修改，确保在主线程执行：

.onChange(of: selectedItem) {
    Task {
        if let data = try? await selectedItem?.loadTransferable(type: Data.self) {
            if let image = UIImage(data: data) {
                await MainActor.run {
                    wine.images.append(image)
                    updateWineRecordPhotos(wine.images)
                }
            }
        } else {
            print("Failed to load the image")
        }
    }
}

4. 优化ForEach的元素标识（可选） #

如果仍存在视图识别问题，可以将图片封装为带唯一ID的结构体，避免用UIImage本身作为标识：

// 新增图片结构体
struct WineImage: Identifiable {
    let id = UUID()
    let image: UIImage
}

// 修改Wine类中的images属性
@Published var images: [WineImage] = []

// 修改HorizontalImageScrollView中的ForEach
ForEach(wine.images) { wineImage in
    Image(uiImage: wineImage.image)
        .resizable()
        .scaledToFill()
        .frame(width: 175, height: 250)
        .clipShape(RoundedRectangle(cornerRadius: 25.0))
        .padding()
}

// 修改图片添加逻辑
await MainActor.run {
    wine.images.append(WineImage(image: image))
    updateWineRecordPhotos(wine.images.map(\.image)) // 适配原update方法的参数类型
}

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