SwiftUI 中带缓存的远程图像 URL,如何从 URL 异步加载图像并将它们缓存在 SwiftUI 中

最新推荐文章于 2024-08-29 08:58:16 发布

code2day

最新推荐文章于 2024-08-29 08:58:16 发布

阅读量642

点赞数

CC 4.0 BY-SA版权

分类专栏： SwiftUI从入门到精通文章标签： swiftui 缓存 ios

本文链接：https://blog.youkuaiyun.com/code2day/article/details/128654240

SwiftUI从入门到精通专栏收录该内容

72 篇文章 ¥49.90 ¥99.00

订阅专栏

本文介绍了如何在 SwiftUI 中从远程 URL 加载图像，并使用缓存策略避免重复网络请求。文章分为 ContentView、ImageView 和 ImageModel 三个部分，详细讲解了每个部分的功能和实现方式。ImageModel 是核心，负责获取 URL 并处理缓存逻辑。通过这样的实现，可以在减少网络负载的同时，提供流畅的用户体验。

在这个项目中，我们将从远程 URL 加载图像并实施缓存以防止我们的应用程序一遍又一遍地发出网络请求。

我们知道 SwiftUI 目前不允许这样的事情，

Image("https://url-of-image")

让我们开始了解如何实现上述功能。我会将定义分为三个不同的文件，以使代码更具可读性。

ContentView — 这是您将远程 URL 传递给 ImageView 的视图。
ImageView — 从 URL 渲染图像
ImageModel — 图像获取和缓存逻辑。
让我们仔细看看这三个文件，

内容视图：

我们只是在此处向屏幕添加图像

struct ImageContentView : View {
  @State var url = "https://link-to-image"
  var body: some View {
    VStack {
      ImageView(url: url)
  } 
}

Image View:

struct ImageUrlView: View {
    @ObservedObject var remoteImageModel: RemoteImageModel
    
    init(url: String?) {
        remoteImageModel = RemoteImageModel(imageUrl: imageUrl)
    }
    
    var body: some View {
        Image(uiIma

了解本专栏