在 SwiftUI 中异步加载存储在可观察对象中的 UIImages答案

【问题标题】：Async load UIImages stored in a observable object in SwiftUI在 SwiftUI 中异步加载存储在可观察对象中的 UIImages
【发布时间】：2020-11-13 04:13:00
【问题描述】：

如何异步加载完全存储在 Observable 类中的图像？

所有其他问题都是关于从远程数据源（网站、网址等）异步加载的。但我想知道如何从包含 UIImages 数组的 ObservableObject 异步加载图像。

现在，因为我只是使用相机拍摄图像并显示它们，它会在所有这些图像加载时冻结我的应用程序。

图像模型

imagesModel: ObservableObject {
  @Published var images: [UIImage] = []
  @Published var imageName: String = ""
}

图像视图

var imgModel: [ImagesModel]

var body: some View {
  ScrollView {
    VStack {

      ForEach(imgModel) { imgEle in
        ForEach(imgEle.images) { img {
          Image(uiImage: img)
                .resizable()
                .scaledToFit()
        }

        Text("\(imgEle.imageName)")
      }
    }

  }
}

这是通过 NavigationLink 访问的，它会冻结 5 秒，只有 10-15 张照片。

不幸的是，我不能只在视图内拍一下 DispatchQueue.main.async 来加载图像。

是否有异步加载这些 UIImages 以便我的应用程序不会完全冻结。类似于能够访问视图，但它是空白的，然后填充图像。

【问题讨论】：

标签： ios swift swiftui uiimage swift5

【解决方案1】：

你可以在后台队列中加载图片，比如

class ImagesModel: ObservableObject {
  @Published var images: [UIImage] = []
  @Published var imageName: String = ""
  
  func load() {
    guard !images.isEmpty else { return }

    DispatchQueue.global(qos: .background).async {
        // ... load here
        
        DispatchQueue.main.async {
           // ... update here
            self.images = loadedImages
        }
    }
  }
}

注意：目前你没有观察到ImageModel，所以最好将一个模型相关的ForEach(imgEle.images)移到分离视图中，让ImagesModel在那里观察到。

【讨论】：