SwiftUI onChange(of: ...) 更新 StateObject

Question

我构建了一个自定义AsyncImage 视图，其中ImageLoader 类获取图像并在检索图像时更新视图。由于 @StateObject 仅在第一次构建视图时被初始化，如果从父级提供的 url 发生更改，我需要一种方法让 ImageLoader 获取新图像，我在底部使用 onChange(of: url)... 执行此操作。如果传递的父参数发生更改，是否可以这样做或者是否有更好的机制来更新 @StateObjects 参数？

struct URLImage: View, Equatable {  
  @StateObject private var loader = ImageLoader()
  private var url: URL?
  private var placeholder: UIImage?
  
  
  init(url: URL?, placeholder: UIImage? = nil) {
    self.url = url
    self.placeholder = placeholder
  }
  
  
  var body: some View {
    Image(uiImage: loader.image ?? UIImage())
      .resizable()
      .opacity(loader.isLoading ? 0 : 1)
      .zIndex(5)
      .overlay(
        VStack {
          if loader.isLoading {
            ProgressView()
              .progressViewStyle(CircularProgressViewStyle())
          }
        }
      )
      .background(
        VStack {
          if placeholder != nil && loader.isLoading == false && loader.image == nil {
            GeometryReader { geo in
              VStack(alignment: .center) {
                Image(uiImage: placeholder!)
                  .resizable()
                  .aspectRatio(contentMode: .fit)
                  .frame(width: geo.size.width / 3)
                  .foregroundColor(Theme.Colors.primary400)
              }
              .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .center)
            }
          }
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Theme.Colors.primary200)
      )
      .onAppear {
        loader.url = url
      }
      .onChange(of: url) { newValue in
        if loader.url != newValue {
          loader.url = newValue
        }
      }
  }
  
  static func == (lhs: Self, rhs: Self) -> Bool {
    lhs.url == rhs.url
  }
}

Answer 1

您应该将传入 URL 设为 Binding。然后，它将更改，并随后更新视图主体。当重新计算视图主体时，onChange(of:perform:) 将被触发，因此您可以对新的url、newValue 进行任何操作。

struct URLImage: View, Equatable {  
  @StateObject private var loader = ImageLoader()
  @Binding private var url: URL?
  private var placeholder: UIImage?
  
  
  init(url: Binding<URL?>, placeholder: UIImage? = nil) {
    _url = url
    self.placeholder = placeholder
  }
  
  
  var body: some View {
    Image(uiImage: loader.image ?? UIImage())
      .resizable()
      .opacity(loader.isLoading ? 0 : 1)
      .zIndex(5)
      .overlay(
        VStack {
          if loader.isLoading {
            ProgressView()
              .progressViewStyle(CircularProgressViewStyle())
          }
        }
      )
      .background(
        VStack {
          if placeholder != nil && loader.isLoading == false && loader.image == nil {
            GeometryReader { geo in
              VStack(alignment: .center) {
                Image(uiImage: placeholder!)
                  .resizable()
                  .aspectRatio(contentMode: .fit)
                  .frame(width: geo.size.width / 3)
                  .foregroundColor(Theme.Colors.primary400)
              }
              .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .center)
            }
          }
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Theme.Colors.primary200)
      )
      .onAppear {
        loader.url = url
      }
      .onChange(of: url) { newValue in
        if loader.url != newValue {
          loader.url = newValue
        }
      }
  }
  
  static func == (lhs: Self, rhs: Self) -> Bool {
    lhs.url == rhs.url
  }
}

另一种方法是将url 传递到ImageLoader，如果您创建一个接受Binding<URL?> 的init。我认为这是更好的方法，因为它更简单，重复的代码更少。这意味着您还可以删除所有 onAppear 和 onChange 内容：

struct URLImage: View, Equatable {  
  @StateObject private var loader: ImageLoader
  private var placeholder: UIImage?
  
  
  init(url: Binding<URL?>, placeholder: UIImage? = nil) {
    _loader = StateObject(wrappedValue: ImageLoader(url: url))
    self.placeholder = placeholder
  }
  
  
  var body: some View {
    Image(uiImage: loader.image ?? UIImage())
      .resizable()
      .opacity(loader.isLoading ? 0 : 1)
      .zIndex(5)
      .overlay(
        VStack {
          if loader.isLoading {
            ProgressView()
              .progressViewStyle(CircularProgressViewStyle())
          }
        }
      )
      .background(
        VStack {
          if placeholder != nil && loader.isLoading == false && loader.image == nil {
            GeometryReader { geo in
              VStack(alignment: .center) {
                Image(uiImage: placeholder!)
                  .resizable()
                  .aspectRatio(contentMode: .fit)
                  .frame(width: geo.size.width / 3)
                  .foregroundColor(Theme.Colors.primary400)
              }
              .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .center)
            }
          }
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Theme.Colors.primary200)
      )
  }
  
  static func == (lhs: Self, rhs: Self) -> Bool {
    lhs.loader.url == rhs.loader.url
  }
}

旁注：我不建议您在此处使用此 Equatable 实现。当您添加其他变量和对象时，这将在将来导致许多问题 - 您只是不需要它。 SwiftUI 通过检查 Equatable 的所有内容来隐式计算视图是否是可等价的。我建议您只删除此视图的一致性。