SwiftUI中ForEach遍历Image数组需遵循Hashable的问题

问题原因 #

你遇到的错误Referencing initializer 'init(_:id:content:)' on 'ForEach' requires that 'Image' conform to 'Hashable'，核心原因：

• SwiftUI的Image是View类型，本身没有遵循Hashable协议，也无法自动合成该协议实现。
• View内部包含渲染状态、环境依赖等复杂信息，Swift无法为它生成可靠的哈希值，因此不能用id: \.self作为ForEach的唯一标识。
• 你之前的误解：只有遵循Hashable（或Identifiable）的类型才能用\.self作为id，而Image并不满足这个条件。

修复方案 #

正确做法是不直接存储SwiftUI的Image对象，转而存储底层的UIImage，或用自定义结构体包装UIImage并添加唯一标识，具体步骤如下：

1. 修改数据存储类型 #

将存储Image数组的变量改为存储UIImage数组，去掉可选类型更简洁：

@State private var images: [UIImage] = []

2. 调整图片加载逻辑 #

直接将选中的UIImage添加到数组，同时清空临时变量避免重复添加：

func loadImages() {
    guard let inputImage = inputImage else { return }
    images.append(inputImage)
    self.inputImage = nil
}

3. 遍历UIImage生成Image视图 #

在ForEach中把UIImage转换成SwiftUI的Image进行展示：

HStack(spacing: 10) {
    ForEach(images, id: \.self) { uiImage in
        Image(uiImage: uiImage)
            .resizable()
            .scaledToFit()
            .frame(height: 100)
            .cornerRadius(8)
    }
}

（UIImage作为引用类型，默认用对象地址作为哈希值，可满足ForEach的标识需求）

4. 升级ImagePicker支持多选 #

原ImagePicker仅支持单选，修改配置开启多选：

func makeUIViewController(context: Context) -> PHPickerViewController {
    var config = PHPickerConfiguration()
    config.filter = .images
    config.selectionLimit = 0 // 0表示允许选择多张图片
    let picker = PHPickerViewController(configuration: config)
    picker.delegate = context.coordinator
    return picker
}

同时修改Coordinator的回调逻辑，处理所有选中的图片：

func picker(_ picker: PHPickerViewController, didFinishPicking results: [PHPickerResult]) {
    picker.dismiss(animated: true)
    
    for result in results {
        guard result.itemProvider.canLoadObject(ofClass: UIImage.self) else { continue }
        result.itemProvider.loadObject(ofClass: UIImage.self) { [weak self] image, _ in
            if let uiImage = image as? UIImage {
                DispatchQueue.main.async {
                    self?.parent.image = uiImage
                }
            }
        }
    }
}

修改后的完整代码 #

ImagePickerTestView #

import SwiftUI

struct ImagePickerTestView: View {
    
    @State private var images: [UIImage] = []
    @State private var isShowingImagePicker = false
    @State private var inputImage: UIImage?
    
    var body: some View {
        NavigationView {
            VStack {
                ZStack {
                    Rectangle()
                        .fill(Color.secondary)
                        .frame(height: 200)
                    
                    Text("Tap To Select Photos")
                        .foregroundColor(.white)
                        .font(.headline)
                }
                .onTapGesture {
                    isShowingImagePicker = true
                }
                
                HStack(spacing: 10) {
                    ForEach(images, id: \.self) { uiImage in
                        Image(uiImage: uiImage)
                            .resizable()
                            .scaledToFit()
                            .frame(height: 100)
                            .cornerRadius(8)
                    }
                }
                .padding(.top)
                
            }
            .padding([.horizontal, .bottom])
            .navigationTitle("Select Images")
            .onChange(of: inputImage) { _ in
                loadImages()
            }
            .sheet(isPresented: $isShowingImagePicker) {
                ImagePicker(image: $inputImage)
            }
        }
    }

    func loadImages() {
        guard let inputImage = inputImage else { return }
        images.append(inputImage)
        self.inputImage = nil
    }
}

#Preview {
    ImagePickerTestView()
}

修改后的ImagePicker #

import PhotosUI
import SwiftUI

struct ImagePicker: UIViewControllerRepresentable {
    @Binding var image: UIImage?
    
    func makeUIViewController(context: Context) -> PHPickerViewController {
        var config = PHPickerConfiguration()
        config.filter = .images
        config.selectionLimit = 0
        let picker = PHPickerViewController(configuration: config)
        picker.delegate = context.coordinator
        return picker
    }
    
    func updateUIViewController(_ uiViewController: PHPickerViewController, context: Context) {}
    
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    
    class Coordinator: NSObject, PHPickerViewControllerDelegate {
        let parent: ImagePicker
        
        init(_ parent: ImagePicker) {
            self.parent = parent
        }
        
        func picker(_ picker: PHPickerViewController, didFinishPicking results: [PHPickerResult]) {
            picker.dismiss(animated: true)
            
            for result in results {
                guard result.itemProvider.canLoadObject(ofClass: UIImage.self) else { continue }
                result.itemProvider.loadObject(ofClass: UIImage.self) { [weak self] image, _ in
                    if let uiImage = image as? UIImage {
                        DispatchQueue.main.async {
                            self?.parent.image = uiImage
                        }
                    }
                }
            }
        }
    }
}

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