SwiftUI使用SDWebImage加载网络图片如何实现长按保存到相册

首先完成两项前置准备：

• 项目导入Photos框架，用于操作系统相册
• 在项目的Info.plist中添加相册写入权限描述：键为NSPhotoLibraryAddUsageDescription，值填写向用户申请权限的提示文本，比如「需要访问相册以保存图片」，无权限配置会导致App写入相册时直接崩溃

核心实现步骤 #

1. 定义状态变量存储加载结果和提示状态 #

import SwiftUI
import SDWebImageSwiftUI
import Photos

struct ContentView: View {
    // 存储SDWebImage加载完成的UIImage
    @State private var loadedImage: UIImage?
    // 控制保存结果提示弹窗
    @State private var showSaveAlert = false
    @State private var saveAlertMessage = ""

2. 在SDWebImage的成功回调中存储加载完成的图片 #

修改原有onSuccess闭包，把返回的图片存入状态变量：

.onSuccess { image, data, cacheType in
    // 保存加载成功的图片
    loadedImage = image
}

3. 给图片添加长按手势，绑定保存逻辑 #

给WebImage添加长按手势修饰符，触发保存方法，长按触发时长可通过minimumDuration自定义调整：

.onLongPressGesture(minimumDuration: 0.5) {
    // 长按触发保存
    saveImageToAlbum()
}
// 绑定保存结果提示弹窗
.alert(isPresented: $showSaveAlert) {
    Alert(title: Text("提示"), message: Text(saveAlertMessage), dismissButton: .default(Text("确定")))
}

4. 实现相册保存逻辑 #

在View内实现保存方法：

private func saveImageToAlbum() {
    guard let image = loadedImage else {
        saveAlertMessage = "图片还未加载完成，暂无法保存"
        showSaveAlert = true
        return
    }
    // 先申请相册写入权限
    PHPhotoLibrary.requestAuthorization(for: .addOnly) { status in
        DispatchQueue.main.async {
            guard status == .authorized else {
                saveAlertMessage = "未获得相册写入权限，请在系统设置中开启权限后重试"
                showSaveAlert = true
                return
            }
            // 执行保存操作
            PHPhotoLibrary.shared().performChanges {
                PHAssetCreationRequest.forAsset().addResource(with: .photo, image: image, options: nil)
            } completionHandler: { success, error in
                DispatchQueue.main.async {
                    if success {
                        saveAlertMessage = "图片已成功保存到相册"
                    } else {
                        saveAlertMessage = "保存失败：\(error?.localizedDescription ?? "未知错误")"
                    }
                    showSaveAlert = true
                }
            }
        }
    }
}

完整整合后的代码示例 #

import SwiftUI
import SDWebImageSwiftUI
import Photos

struct ContentView: View {
    @State private var loadedImage: UIImage?
    @State private var showSaveAlert = false
    @State private var saveAlertMessage = ""
    
    var body: some View {
        WebImage(url: URL(string: "https://nokiatech.github.io/heif/content/images/ski_jump_1440x960.heic"))
            .onSuccess { image, data, cacheType in
                loadedImage = image
            }
            .resizable()
            .placeholder(Image(systemName: "photo"))
            .placeholder {
                Rectangle().foregroundColor(.gray)
            }
            .indicator(.activity)
            .transition(.fade(duration: 0.5))
            .scaledToFit()
            .frame(width: 300, height: 300, alignment: .center)
            .onLongPressGesture(minimumDuration: 0.5) {
                saveImageToAlbum()
            }
            .alert(isPresented: $showSaveAlert) {
                Alert(title: Text("提示"), message: Text(saveAlertMessage), dismissButton: .default(Text("确定")))
            }
    }
    
    private func saveImageToAlbum() {
        guard let image = loadedImage else {
            saveAlertMessage = "图片还未加载完成，暂无法保存"
            showSaveAlert = true
            return
        }
        PHPhotoLibrary.requestAuthorization(for: .addOnly) { status in
            DispatchQueue.main.async {
                guard status == .authorized else {
                    saveAlertMessage = "未获得相册写入权限，请在系统设置中开启权限后重试"
                    showSaveAlert = true
                    return
                }
                PHPhotoLibrary.shared().performChanges {
                    PHAssetCreationRequest.forAsset().addResource(with: .photo, image: image, options: nil)
                } completionHandler: { success, error in
                    DispatchQueue.main.async {
                        if success {
                            saveAlertMessage = "图片已成功保存到相册"
                        } else {
                            saveAlertMessage = "保存失败：\(error?.localizedDescription ?? "未知错误")"
                        }
                        showSaveAlert = true
                    }
                }
            }
        }
    }
}

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