SwiftUI，无法通过带有 PageTabViewStyle 的 URL 加载图像

Question

您好，我正在努力解决无法在 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, height: height_banner, alignment: .topLeading)
}

我想知道如何在这个 tabview 中显示图像。或者我应该构建自定义视图来制作分页视图。

Answer 1

我认为这是关于异步操作的。我想出了这个解决方案；

在视图中：

@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（命名：“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, height:200, alignment: .topLeading)
                }
            }
        }
    }
    .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))

这很好用。