在 SwiftUI 中显示带有 URL 的 KFImage 时遇到问题 - Kingfisher

Question

我目前正在开发一个 SwiftUI 项目并使用 Kingfisher 库来显示图像。但是，我在使用带有 URL 的

KFImage

视图显示图像时遇到问题。

这是我的代码的简化版本：

import SwiftUI
import Kingfisher

struct TopMoviePreview: View {
    var movie: Movie
    
    func isCategoryLast(_ cat: String) -> Bool {
        let catCount = movie.categories.count
        
        if let index = movie.categories.firstIndex(of: cat) {
            if index + 1 != catCount {
                return false
            }
        }
        
        return true
    }
    
    var body: some View {
        ZStack {
            KFImage(URL(string:"https://picsum.photos/seed/picsum/200/300")!)
                .resizable()
                .scaledToFill()
                .clipped()
            
            VStack {
                Spacer()
                
                HStack {
                    ForEach(movie.categories, id: \.self) { category in
                        
                        HStack {
                            Text(category)
                            .font(.footnote)
                            .foregroundColor(.black)
                            
                            if !isCategoryLast(category) {
                                Image(systemName: "circle.fill")
                                    .foregroundColor(.blue)
                                    .font(.system(size: 3))
                            }
                        }
                    }
                }
                
                HStack {
                    Spacer()
                    
                    SmallVerticalButton(text: "My List", isOnImage: "checkmark", isOffImage: "plus", isOn: true) {
                        //
                    }
                    
                    Spacer()
                    
                    WhiteButton(text: "Play", imageName: "play.fill") {
                        //
                    }
                    .frame(width: 120)
                    
                    Spacer()
                    
                    SmallVerticalButton(text: "Info", isOnImage: "info.circle", isOffImage: "info.circle", isOn: true) {
                        //
                    }
                    
                    Spacer()
                }
            }
            .background(
//                LinearGradient.blackOpacityGradient
//                    .padding(.top, 250)
            )
        }
        .foregroundColor(.white)
    }
}


#Preview {
    TopMoviePreview(movie: movie2)
}

问题是图像未按预期显示。我已经验证了 URL 是正确的，如果我将其替换为静态图像，则可以正常工作。好像和图片的异步加载有关

我尝试过使用不同的方法，包括检查 URL 是否有效并强制解包，但问题仍然存在。占位符图像也没有显示。

任何有关可能导致此问题的原因以及我如何解决该问题的见解或建议将不胜感激。

谢谢！

更新预览，它不显示任何图像

Answer 1

这个问题不是关于

KFImage

，而是关于你的布局。由于你的内容视图是

ZStack

，它会自动填充整个屏幕或superView。您还将 VStack 置于 KFImage 之上。这个VStack框架高度压倒了整个屏幕，用

.background

，它会覆盖

KFImage

。尝试注释掉

.background

。您将看到 KFImage 出现。