iOS WidgetKit:远程图片加载失败
iOS WidgetKit: remote images fails to load
我观察到一件奇怪的事情:在新的小部件中,即使图像已成功加载并放入缓存中,远程图像也经常不显示。
图片下载我试过:
- SDWebImageSwiftUI
- 翠鸟
- SwURL
都表示图片加载成功,但是实际的widget没有显示。
struct TestWidgetEntryView : View {
var entry: Provider.Entry
var body: some View {
WebImage(url: URL(string: "https://miro.medium.com/max/3840/0*TLqp5Uwavd-U_xrs.jpg"))
.onSuccess()
.resizable()
}
}
在调试器的第二个 运行 上 - 从缓存加载图像 - 我显示了图像,但从不(?)在初始 运行。
感觉在onSuccess中需要触发UI-失效?但是怎么办?
(因为它确实发生在我尝试的每个图像库中 - 我不认为它在库中有问题)
环境:
- iOS 14 Beta 3(设备和模拟器)
- Xcode 12 测试版 3
- 在调试期间 运行,内存使用量约为 15mb
知道了:它根本不受支持,您打算在 TimelineProvider 中加载图像:
是的,正如 Konstantin 所说,不支持异步加载图像。在小部件中加载网络图像有 2 个选项
要么获取 TimelineProvider 中的所有图像,然后将它们直接注入视图。
或
使用Data(contentsOf: url)
获取图像。这样它仍然同步获取它们,但代码更清晰。示例代码-
struct NetworkImage: View {
private let url: URL?
var body: some View {
Group {
if let url = url, let imageData = try? Data(contentsOf: url),
let uiImage = UIImage(data: imageData) {
Image(uiImage: uiImage)
.resizable()
.aspectRatio(contentMode: .fill)
}
else {
Image("placeholder-image")
}
}
}
}
这个视图可以像这样简单地使用 -
NetworkImage(url: url)
我观察到一件奇怪的事情:在新的小部件中,即使图像已成功加载并放入缓存中,远程图像也经常不显示。
图片下载我试过:
- SDWebImageSwiftUI
- 翠鸟
- SwURL
都表示图片加载成功,但是实际的widget没有显示。
struct TestWidgetEntryView : View {
var entry: Provider.Entry
var body: some View {
WebImage(url: URL(string: "https://miro.medium.com/max/3840/0*TLqp5Uwavd-U_xrs.jpg"))
.onSuccess()
.resizable()
}
}
在调试器的第二个 运行 上 - 从缓存加载图像 - 我显示了图像,但从不(?)在初始 运行。
感觉在onSuccess中需要触发UI-失效?但是怎么办?
(因为它确实发生在我尝试的每个图像库中 - 我不认为它在库中有问题)
环境:
- iOS 14 Beta 3(设备和模拟器)
- Xcode 12 测试版 3
- 在调试期间 运行,内存使用量约为 15mb
知道了:它根本不受支持,您打算在 TimelineProvider 中加载图像:
是的,正如 Konstantin 所说,不支持异步加载图像。在小部件中加载网络图像有 2 个选项
要么获取 TimelineProvider 中的所有图像,然后将它们直接注入视图。
或
使用
Data(contentsOf: url)
获取图像。这样它仍然同步获取它们,但代码更清晰。示例代码-struct NetworkImage: View { private let url: URL? var body: some View { Group { if let url = url, let imageData = try? Data(contentsOf: url), let uiImage = UIImage(data: imageData) { Image(uiImage: uiImage) .resizable() .aspectRatio(contentMode: .fill) } else { Image("placeholder-image") } } } }
这个视图可以像这样简单地使用 -
NetworkImage(url: url)