在 SwiftUI 中使用 URL 从服务器异步加载图片

发布
更新
字数 398
阅读 2 分钟
阅读量 971

SwiftUI 中 Image 不同于 UIImage 没有 Image(url:) API，需要使用 URL 加载图片时可以使用异步图片 AsyncImage，可以指定 url，设置 placeholder，监听进程等。

AsyncImage 是可用于异步加载并显示图片的视图。使用 URL 加载一个远程图片时，可以使用：

AysncImage(url: URL(string: "http://your/image/url"))

可以通过完整的 init(url:scale:content:placeholder:) 初始化方法修改 placeholder。此外由于 AsyncImage 返回的是一个 View，可以使用 frame() 等修改器，但如果要使用 Image 修改器，如 resizable(capInsets:resizingMode:) 等，就需要使用加载后的 Image

AsyncImage(url: URL(string: "http://your/image/url")) { image in
    image.resizable()
} placeholder: {
    ProgressView()
}
.frame(width: 50, height: 50)

scale 参数是指图片是几倍大的，例如预计 120 像素宽的图像，为了在 Retina 屏幕上不出现锯齿，切图时会使用 @3 倍大的切图，得到一个 360 像素宽的图片，在加载该图片时就需要设置 scale 为 3，才会得到预期的效果。如果默认 scale 为 1 时，加载该图片会按照原始尺寸显示一个模糊的图片。

如果需要监控图片加载进程，可以使用 init(url:scale:transaction:content:) 初始化方法，content 闭包会传递一个 AsyncImagePhase （https://developer.apple.com/documentation/swiftui/asyncimagephase）来标识加载进程

AsyncImage(url: URL(string: "http://your/image/url")) { phase in
    if let image = phase.image {
        image // 完成，显示 `Image` ，可以使用修改器.
    } else if phase.error != nil {
        Color.red // 错误
    } else {
        Color.blue // 加载中，显示占位符
    }
}

阅读完整文档：https://developer.apple.com/documentation/swiftui/asyncimage

AsyncImage SwiftUI