SwiftUI中KFImage按需重试功能实现问题求助

问题根源 #

Kingfisher的RetryStrategy设计初衷是实现自动重试逻辑，无法通过绑定shouldRetry直接触发手动重试——因为Kingfisher不会监听该绑定值的变化来重新发起请求。要实现按需重试，核心是让KFImage重新加载目标资源。

方案1：通过资源标识符刷新（推荐） #

给目标资源URL添加一个可变的"重试标记"，让Kingfisher识别为新资源，从而自动重新发起请求。

@State private var isFailed = false
@State private var retryCount = 0
@State private var condition = true

var body: some View {
    // 给资源URL追加重试计数，构造唯一请求标识
    let retryableIcon = icon.appending(queryItems: [URLQueryItem(name: "retry", value: "\(retryCount)")])
    
    KFImage(retryableIcon)
        .attachPlaceholderAndErrorView(onError: { _ in
            isFailed = true
        })
        .resizable()
        .aspectRatio(contentMode: .fit)
        .isVisible(condition)
        .overlay(alignment: .center) {
            if isFailed {
                Button("重试") {
                    isFailed = false
                    retryCount += 1 // 递增标记触发重新加载
                }
                .foregroundColor(.white)
                .padding()
                .background(Color.red)
                .cornerRadius(8)
            }
        }
}

方案2：手动调用reload()方法 #

通过封装KingfisherImageView的SwiftUI视图，直接获取实例并调用重载方法。

@State private var isFailed = false
@State private var condition = true
@State private var imageView: KingfisherImageView?

var body: some View {
    KingfisherImageViewWrapper(imageView: $imageView, source: icon) {
        isFailed ? Image(systemName: "exclamationmark.triangle").foregroundColor(.red) : ProgressView()
    }
    .onFailure { _ in
        isFailed = true
    }
    .resizable()
    .aspectRatio(contentMode: .fit)
    .isVisible(condition)
    .overlay(alignment: .center) {
        if isFailed {
            Button("重试") {
                isFailed = false
                imageView?.reload() // 手动触发重载
            }
            .foregroundColor(.white)
            .padding()
            .background(Color.red)
            .cornerRadius(8)
        }
    }
}

// 自定义UIViewRepresentable封装
struct KingfisherImageViewWrapper: UIViewRepresentable {
    @Binding var imageView: KingfisherImageView?
    let source: Source
    let placeholderContent: () -> AnyView
    var onFailure: ((Error) -> Void)?
    
    func makeUIView(context: Context) -> KingfisherImageView {
        let view = KingfisherImageView()
        updateImage(for: view)
        imageView = view
        return view
    }
    
    func updateUIView(_ uiView: KingfisherImageView, context: Context) {
        if uiView.kf.source != source {
            updateImage(for: uiView)
        }
    }
    
    private func updateImage(for view: KingfisherImageView) {
        view.kf.setImage(with: source) { result in
            if case .failure(let error) = result {
                onFailure?(error)
            }
        }
    }
}

方案3：通过id重建视图 #

利用SwiftUI的id修饰符，改变id值让系统重新创建KFImage实例，从而触发重新加载。

@State private var isFailed = false
@State private var retryId = UUID()
@State private var condition = true

var body: some View {
    KFImage(icon)
        .attachPlaceholderAndErrorView(onError: { _ in
            isFailed = true
        })
        .resizable()
        .aspectRatio(contentMode: .fit)
        .isVisible(condition)
        .id(retryId) // 用id控制视图重建
        .overlay(alignment: .center) {
            if isFailed {
                Button("重试") {
                    isFailed = false
                    retryId = UUID() // 生成新id触发重建
                }
                .foregroundColor(.white)
                .padding()
                .background(Color.red)
                .cornerRadius(8)
            }
        }
}

方案对比 #

• 方案1：最简洁，无需额外封装，利用Kingfisher缓存机制，优先推荐
• 方案2：灵活性高，可直接控制ImageView实例，适合复杂定制场景
• 方案3：实现简单，但会重建视图，存在轻微性能开销

内容的提问来源于stack exchange，提问作者George Rosescu