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

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

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 闭包会传递一个 AsyncImagePhasehttps://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