站点图标 Codeun

SwiftUI 使用 Kingfisher 网络图像缓存下载库的详细示例与API说明

Codeun

Kingfisher 是一个轻量级、纯 Swift 实现的异步下载和缓存图片的库，github 介绍中提到了以下一些特性：

添加Kingfisher库

推荐 Swift Package Manager (SPM) 方式，如出现加载困难可阅读《 解决Xcode中SPM加载卡慢问题》

使用示例

import Kingfisher

    let customDownloader = ImageDownloader(name: "MyImgDownloader")
    let customCache = ImageCache(name: "offlineCache")
    
    var body: some View {
        KFImage(URL(string: "https://www.codeun.com/logo.png"))
            // 调整渲染模式
            .renderingMode(.template)
            // 图像加载时展示默认占位图
            .placeholder {
                Image(systemName: "placeholder")
                    .resizable()
                    .scaledToFit()
                    .opacity(0.3)
            }
            // 也可以在图像加载时展示进度指示器
            // .placeholder {
            //      ProgressView()
            // }
            // 加载完成后淡入效果
            .fade(duration: 0.5)
            // 使用缓存策略
            .cacheMemoryOnly()
            // 使用刷新策略
            // .forceRefresh()
            // 图像加载进度
            .onProgress { receivedSize, totalSize in
                print("总大小：\(totalSize) - 已接受:\(receivedSize)")
            }
            // 图像加载完成
            .onSuccess { result in
                print("\(result.image) - \(result.cacheType)")
            }
            .onFailure { error in
                print("\(error)")
            }
            // 目标缓存
            .targetCache(customCache)
            // 使用自定义下载器
            .downloader(customDownloader)
            .resizable()
            .scaledToFit()
        
            .scaleEffect(0.9)
            .animation(.easeInOut(duration: 0.5))
            // 圆角
            .clipShape(RoundedRectangle(cornerRadius: 12))
            // 边框
            .overlay(RoundedRectangle(cornerRadius: 12).stroke(Color.green, lineWidth: 2))
    }
}

其他部分 API 说明

再来一个示例

自定义图片下载request请求设置 (header, Authorization, token 等)
根据网络状态设置 placeholder 和 缓存方式
@Environment(\.networkState) var networkState: NetworkState

let myDownloader = ImageDownloader(name: "myDownloader")
let myCache = ImageCache(name: "myCache")
let customKF = KingfisherManager(downloader: myDownloader, cache: myCache)

// 自定义图片下载request请求设置
let options: KingfisherOptionsInfo = [
    .requestModifier(ImageDownloadRequestModifier(modify: { request in
        var newRequest = request
        newRequest.addValue("Bearer mock_token", forHTTPHeaderField: "Authorization")
        newRequest.addValue("codeun_app", forHTTPHeaderField: "UserAgent")
        return newRequest
    }))
]



KFImage(URL(string: "https://example.com/image.jpg"))
    .placeholder {
        if networkState.isOffline {
            Text("无法加载图片，请检查网络连接")
        } else {
            ProgressView()
        }
    }
    .cacheStrategy(networkState.isOffline ? .memoryOnly : .default)
退出移动版