观察属性自定义视图 SwiftUI 的变化

Question

我创建了一个自定义视图 NetworkImage 来异步加载图像。

import Combine
import SwiftUI

struct NetworkImage<Placeholder: View>: View {
    @StateObject private var viewModel = NetworkImageViewModel()
    let url: String?
    let placeholder: Placeholder
    let saveLocally:Bool
    
    init(_ url: String?, @ViewBuilder placeholder: () -> Placeholder, saveLocally:Bool = false) {
        self.url = url
        self.placeholder = placeholder()
        self.saveLocally = saveLocally
    }
    
    func loadImage(_ url:String?)  {
        if let url = url {
            viewModel.loadImage(from: url, saveLocally: saveLocally)
        }
    }
    
    var body: some View {
        Group {
            if let uiImage = viewModel.image {
                Image(uiImage: uiImage)
                    .resizable()
            } else {
                placeholder
            }
        }
        .onAppear {
            if let url = url {
                viewModel.loadImage(from: url, saveLocally: saveLocally)
            }
        }
    }
}

我在自己的观点中使用了它，而且效果非常好。但现在我希望每次 url 更改时都能用新图像替换图像。我怎样才能做到这一点？如何将视图的视图模型的 @Published 属性传递给此 NetworkImage 视图并使其工作？

谢谢

Answer 1

使用onChange修饰符查看url参数是否改变：

struct NetworkImage<Placeholder: View>: View {
    @StateObject private var viewModel = NetworkImageViewModel()
    let url: String?
    let placeholder: Placeholder
    let saveLocally:Bool = false
    
    func loadImage(_ url:String?)  {
        if let url = url {
            viewModel.loadImage(from: url, saveLocally: saveLocally)
        }
    }
    
    var body: some View {
        Group {
            if let uiImage = viewModel.image {
                Image(uiImage: uiImage)
                    .resizable()
            } else {
                placeholder
            }
        }
        .onAppear {
            self.loadImage(url)
        }
        .onChange(of: url) { url in
            self.loadImage(url)
        }
    }
}

观察属性自定义视图 SwiftUI 的变化

Observe property change in custom view SwiftUI

view

swiftui

combine

观察 属性 自定义视图 SwiftUI 的变化

Observe property change in custom view SwiftUI

view

swiftui

combine

观察属性自定义视图 SwiftUI 的变化