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

Question

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

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

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

ImagesModel

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 访问的，只有 10-15 张照片会冻结 5 秒左右。

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

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

Answer 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在那里观察。

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

Async load UIImages stored in a observable object in SwiftUI

uiimage

ios

swift

swift5

swiftui