SwiftUI如何实现Image内容随ViewModel属性更新动态响应

你现在的实现没法触发UI更新，核心是两个违反SwiftUI状态设计规则的问题：

• @State是专门为View内部的本地值类型状态设计的属性包装，它的存储由SwiftUI视图树托管，作用域和当前绑定的View强绑定，根本不适合在独立的ViewModel中使用。放在ViewModel里的@State既没法实现状态变化的广播，也会导致哪怕emojiImage被重新赋值，View完全感知不到变化，自然不会刷新界面。
• 图片下载使用的是同步的Data(contentsOf:)方法，这类耗时操作直接跑在主线程上，不仅会阻塞UI交互，弱网下还会直接触发应用无响应；再加上没有配套的状态通知机制，就算图片加载完成，界面也不会有任何变化。

1. 改造ViewModel为SwiftUI可观察的对象 #

• 给ViewModel添加ObservableObject协议
• 把原来错放的@State替换为@Published，这个属性包装会在属性值变化时自动通知所有观察它的View刷新
• 把耗时的图片下载逻辑移到后台线程，加载完成后回到主线程更新状态，避免卡UI
  修正后的ViewModel参考代码：

class EmojiViewModel: ObservableObject {
    // 用@Published替代错误放在这里的@State
    @Published var emojiImage: UIImage = UIImage()
    // 保持你原有的repository依赖即可
    private let repository: EmojiRepository
    
    func updatesRandomEmojiImage() {
        guard let url = URL(string: randomEmojiUrl()) else { return }
        downloadEmojiImage(fromUrl: url)
    }
    
    func randomEmojiUrl() -> String {
        repository.emojis().randomElement()?.imageUrl ?? ""
    }
    
    private func downloadEmojiImage(fromUrl url: URL) {
        // 把同步下载逻辑放到后台队列执行，不阻塞主线程
        DispatchQueue.global(qos: .userInitiated).async {
            // 去掉强制解包，做安全的可选值判断，避免数据损坏时崩溃
            guard let data = try? Data(contentsOf: url),
                  let image = UIImage(data: data) else {
                return
            }
            // 必须回到主线程更新UI相关的状态
            DispatchQueue.main.async {
                self.emojiImage = image
            }
        }
    }
}

2. 调整View中的ViewModel持有方式 #

在View中需要用@StateObject持有改造后的ViewModel，把它的生命周期和当前View绑定，才能正常接收到ViewModel抛出的状态变化通知，Image和Button的原有逻辑不需要大改：

struct EmojiRandomView: View {
    // 用@StateObject持有可观察的ViewModel
    @StateObject var viewModel: EmojiViewModel
    
    var body: some View {
        VStack(spacing: 20) {
            Image(uiImage: viewModel.emojiImage)
                .resizable()
                .scaledToFit()
                .frame(width: 120, height: 120)
            
            Button(action: {
                viewModel.updatesRandomEmojiImage()
            }, label: {
                Text("RANDOM EMOJI")
            })
            .buttonStyle(FilledButton())
        }
    }
}

• 不要在非View层的代码里使用@State，这个属性包装的设计语义和存储机制都不适合业务逻辑层，错误使用会出现各种无规律的状态丢失、UI不刷新的问题
• 所有涉及UI更新的代码必须在主线程执行，后台队列加载完数据后直接修改emojiImage会触发系统的运行时告警
• 网络拉取的图片数据不要用强制解包初始化UIImage，网络异常、数据截断时直接会导致应用崩溃

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