问题描述
嗨,我正在努力解决无法在 TabView 中加载图像的问题
我想进行页面视图,所以我尝试使用 TabView() 和 PageTabViewStyle。
我还使用 KingFisher 库通过 URL 加载图像。
TabView() {
KFImage(URL(string: <ADDRESS for IMAGE>)!)
.resizable()
.clipped()
.frame(width: width_screen,height: height_banner,alignment: .topLeading)
}
.tabViewStyle(PageTabViewStyle(indexdisplayMode: .never))
我对 KFImage 有疑问,但如果 KFImage 范围在 TabView() 之外,它运行良好。当我编写如下代码时,它运行良好。
var body: some View {
TabView() {
...
}
KFImage(URL(string: "<ADDRESS for IMAGE>")!)
.resizable()
.clipped()
.frame(width: width_screen,alignment: .topLeading)
}
我想知道如何在此 tabview 中显示图像。或者我应该构建自定义视图来制作分页视图。
解决方法
我认为这是关于异步操作的。我想出了这个解决方案;
在视图中:
@State private var image: UIImage? = nil
在正文中:
TabView() {
Image(uiImage: image ?? UIImage(named: "defaultImage")!)
.resizable()
.clipped()
.frame(width: 250,height:200,alignment: .topLeading)
.onAppear(perform: {
fetchImage()
})
}
.tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
*我使用了"UIImage(named: "defaultImage")!"和“width: 250,height:200”,但你可以用你的替换它们。
在视图中:
private func fetchImage() {
if let url = URL(string: imageUrl) {
KingfisherManager.shared.retrieveImage(with: url) { result in
let image = try? result.get().image
if let image = image {
self.image = image
}
}
}
}
另一种不使用 Kingfisher 的解决方案是这样的;
TabView() {
if let url = URL(string: imageUrl) {
if let imageData: NSData = NSData(contentsOf: url) {
if let image = UIImage(data: imageData as Data) {
Image(uiImage: image)
.resizable()
.clipped()
.frame(width: 250,alignment: .topLeading)
}
}
}
}
.tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
效果很好。