SwiftUI中多选照片后崩溃修复及多张图片展示方法咨询

你的现有代码仅存储并展示了第一张选中的图片，要实现全部展示，核心是将单张图片的存储改为数组结构，遍历所有选中项加载图片，最后用合适的布局呈现所有内容。以下是具体实现：

1. 修改状态变量 #

把存储单张图片数据的变量改为存储多张UIImage的数组，用于保存所有选中的图片：

@State private var selectedImages: [UIImage] = []
@State private var selectedItems: [PhotosPickerItem] = []

2. 处理多选图片的加载逻辑 #

在onChange回调中遍历所有选中的PhotosPickerItem，逐个加载图片数据并转换为UIImage添加到数组中。同时替换原代码中的fatalError（会直接导致App崩溃），改用错误打印：

.onChange(of: selectedItems) { newItems in
    selectedImages.removeAll() // 清空旧数据，避免重复展示
    for item in newItems {
        item.loadTransferable(type: Data.self) { result in
            DispatchQueue.main.async { // 确保在主线程更新UI，避免异常
                switch result {
                case .success(let data):
                    if let data, let uiImage = UIImage(data: data) {
                        selectedImages.append(uiImage)
                    } else {
                        print("无法加载该图片")
                    }
                case .failure(let error):
                    print("加载图片失败: \(error.localizedDescription)")
                }
            }
        }
    }
}

3. 展示所有选中的图片 #

根据需求选择以下布局方式：

方式一：横向滚动列表 #

适合少量图片的横向展示：

ScrollView(.horizontal, showsIndicators: false) {
    HStack(spacing: 16) {
        for image in selectedImages {
            Image(uiImage: image)
                .resizable()
                .scaledToFit()
                .frame(width: 150, height: 150)
                .cornerRadius(8)
        }
    }
    .padding()
}

方式二：自适应网格布局 #

适合大量图片的规整展示：

LazyVGrid(columns: [GridItem(.adaptive(minimum: 120))], spacing: 16) {
    ForEach(selectedImages.indices, id: \.self) { index in
        Image(uiImage: selectedImages[index])
            .resizable()
            .scaledToFill()
            .frame(height: 120)
            .clipped()
            .cornerRadius(8)
    }
}
.padding()

完整代码示例 #

import SwiftUI
import PhotosUI
import CoreTransferable

struct ContentView: View {
    @State private var selectedImages: [UIImage] = []
    @State private var selectedItems: [PhotosPickerItem] = []
    
    var body: some View {
        VStack {
            // 用网格布局展示所有选中图片
            if !selectedImages.isEmpty {
                LazyVGrid(columns: [GridItem(.adaptive(minimum: 120))], spacing: 16) {
                    ForEach(selectedImages.indices, id: \.self) { index in
                        Image(uiImage: selectedImages[index])
                            .resizable()
                            .scaledToFill()
                            .frame(height: 120)
                            .clipped()
                            .cornerRadius(8)
                    }
                }
                .padding()
            } else {
                Text("暂无选中图片")
                    .foregroundColor(.gray)
                    .padding()
            }
            
            Spacer()
            
            PhotosPicker(selection: $selectedItems,
                         matching: .images) {
                Text("选择照片")
                    .padding()
                    .background(.blue)
                    .foregroundColor(.white)
                    .cornerRadius(8)
            }
            .onChange(of: selectedItems) { newItems in
                selectedImages.removeAll()
                for item in newItems {
                    item.loadTransferable(type: Data.self) { result in
                        DispatchQueue.main.async {
                            switch result {
                            case .success(let data):
                                if let data, let uiImage = UIImage(data: data) {
                                    selectedImages.append(uiImage)
                                } else {
                                    print("无法加载该图片")
                                }
                            case .failure(let error):
                                print("加载图片失败: \(error.localizedDescription)")
                            }
                        }
                    }
                }
            }
        }
        .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

关键注意点 #

• 主线程更新UI：loadTransferable的回调运行在后台线程，必须用DispatchQueue.main.async切换到主线程修改UI状态，避免更新异常。
• 避免崩溃风险：原代码的fatalError会直接终止App，换成错误打印更安全。
• 清空旧数据：每次选中新图片时先清空数组，避免新旧图片混合展示。

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