SwiftUI中Photo Picker选图后全屏预览首次显示异常问题

你现在的问题是把fullScreenCover放在了ForEach循环内部，每个图片项都绑定了同一个isFullscreenImage状态。当首次点击图片时，虽然selectedItem已经更新，但SwiftUI的视图刷新机制下，循环内所有的fullScreenCover都会尝试渲染，弹窗展示时可能还没等到selectedItem的更新同步到所有视图，导致显示初始值（第一张图）。另外，多个弹窗实例共存本身也会造成状态混乱。

核心是只保留一个全屏弹窗实例，并改用item绑定的方式替代isPresented，直接关联选中的图片数据，避免状态同步问题。

步骤1：调整状态变量 #

把原来的selectedItem（可选Int）改成绑定选中图片数据的可选变量：

@State private var selectedImageData: Data? // 替代原来的selectedItem

步骤2：重构LazyVGrid和弹窗 #

把fullScreenCover从ForEach中移到LazyVGrid外部，同时修改点击手势逻辑：

LazyVGrid(columns: [.init(.adaptive(minimum: 100, maximum: .infinity), spacing: 4)], spacing: 4) {
    ForEach(0..<selectedImagesData.count, id:\.self) { item in
        Image(uiImage: UIImage(data: selectedImagesData[item])!)
            .resizable()
            .scaledToFill()
            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
            .clipped()
            .aspectRatio(1, contentMode: .fit)
            .onTapGesture {
                // 直接绑定选中的图片数据
                selectedImageData = selectedImagesData[item]
            }
    }
}
// 将fullScreenCover移到外部，只保留一个实例
.fullScreenCover(item: $selectedImageData) { imageData in
    NavigationView{
        Image(uiImage: UIImage(data: imageData)!)
            .resizable()
            .aspectRatio(contentMode: .fit)
            .toolbar {
                ToolbarItem(placement: .topBarTrailing){
                    Button("Fermer") {
                        selectedImageData = nil // 关闭弹窗
                    }
                }
                
                ToolbarItem(placement: .bottomBar) {
                    let currentImage = UIImage(data: imageData)!
                    ShareLink(item: currentImage, preview: SharePreview("Photo de mon vélo", image: currentImage)) {
                        Image(systemName: "square.and.arrow.up")
                    }
                }
                
                ToolbarItem(placement: .bottomBar) {
                    Button {
                        // 找到当前图片在数组中的索引并删除
                        if let index = selectedImagesData.firstIndex(of: imageData) {
                            selectedImagesData.remove(at: index)
                        }
                        selectedImageData = nil // 关闭弹窗
                    } label: {
                        Image(systemName: "trash")
                    }
                }
            }
    }
}

关键改动说明 #

1. 弹窗移到外部：确保整个视图只有一个fullScreenCover实例，避免多个弹窗触发时的状态冲突。
2. 用item绑定替代isPresented：fullScreenCover(item:)会自动在item非空时展示弹窗，为空时关闭，状态管理更清晰，还能直接拿到选中的图片数据，不需要通过索引间接获取。
3. 删除逻辑调整：通过firstIndex(of:)找到当前图片的索引，确保删除正确的项（如果数组中存在重复数据，可给图片数据添加唯一id来精准匹配）。

这样修改后，首次点击图片就能直接显示对应内容，不会再出现显示第一张图的问题。

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