SwiftUI中如何将RemoteImage加载失败占位图替换为自定义Indicator结构

修改方案 #

你原来的RemoteImage组件限制了返回值只能是Image类型，无法直接插入自定义的Indicator组件，需要调整渲染逻辑，按加载状态返回对应类型的View即可，修改后的完整代码如下：

修改后的RemoteImage代码 #

struct RemoteImage: View {
    private enum LoadState {
        case loading, success, failure
    }

    private class Loader: ObservableObject {
        var data = Data()
        var state = LoadState.loading

        init(url: String) {
            guard let parsedURL = URL(string: url) else {
                fatalError("Invalid URL: \(url)")
            }
            URLSession.shared.dataTask(with: parsedURL) { data, response, error in
                if let data = data, data.count > 0, let _ = UIImage(data: data) {
                    self.data = data
                    self.state = .success
                } else {
                    self.state = .failure
                }
                DispatchQueue.main.async {
                    self.objectWillChange.send()
                }
            }.resume()
        }
    }

    @StateObject private var loader: Loader
    // 可按需配置不同状态的展示内容
    var showIndicatorOnFailure: Bool = true
    var useOriginalLoadingImage: Bool = false

    init(url: String) {
        _loader = StateObject(wrappedValue: Loader(url: url))
    }

    var body: some View {
        switch loader.state {
        case .loading:
            if useOriginalLoadingImage {
                Image("loadingimage").resizable()
            } else {
                Indicator()
            }
        case .failure:
            if showIndicatorOnFailure {
                Indicator()
            } else {
                Image("noconnection").resizable()
            }
        case .success:
            Image(uiImage: UIImage(data: loader.data)!)
                .resizable()
        }
    }
}

自定义说明 #

• 如果要保留加载阶段显示原来的loading图片，将useOriginalLoadingImage设为true即可
• 如果需要临时切回原来的失败占位图，将showIndicatorOnFailure设为false即可
• 你写的Indicator结构不需要做任何修改可以直接复用

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