LazyVGrid中Context Menu删除按钮始终删除首个照片问题求助

在LazyVGrid这类懒加载容器里，SwiftUI会复用视图来优化性能。Context Menu的闭包捕获photo变量时，因为视图复用机制，闭包可能会保留对第一个加载的photo实例的引用，而非当前操作的实例，这就导致删除操作总是选中列表第一个元素。

方案1：给每个缩略图加唯一ID #

在photoThumbnail的根VStack上添加.id(photo.id)，强制SwiftUI为每个photo创建独立视图实例，避免复用带来的上下文混乱：

@ViewBuilder
private func photoThumbnail(photo: Photo, photos: [Photo]) -> some View {
    VStack(alignment: .leading) {
        KFImage(URL(string: photo.path))
            .placeholder { ProgressView() }
            .resizable()
            .aspectRatio(contentMode: .fill)
            .frame(width: 80, height: 80)
            .clipShape(RoundedRectangle(cornerRadius: 8))
    }
    .id(photo.id) // 新增此行，确保每个视图唯一
    .onTapGesture {
        print("onTapGesture: \(photo.name)")
        onPhotoTapped(photo, photos)
    }
    .contextMenu {
        Button(role: .destructive) {
            print("ContextMenu: \(photo.name)")
            self.photoToDelete = photo
        } label: {
            Label("Delete Photo", systemImage: "trash")
        }      
    }
}

方案2：把缩略图拆成独立子视图 #

将包含Context Menu的部分封装成单独子视图，让每个子视图持有自己的photo引用，彻底隔离上下文：

// 新增独立子视图
struct PhotoThumbnailView: View {
    let photo: Photo
    let photos: [Photo]
    let onPhotoTapped: (Photo, [Photo]) -> Void
    let onDelete: (Photo) -> Void
    
    var body: some View {
        VStack(alignment: .leading) {
            KFImage(URL(string: photo.path))
                .placeholder { ProgressView() }
                .resizable()
                .aspectRatio(contentMode: .fill)
                .frame(width: 80, height: 80)
                .clipShape(RoundedRectangle(cornerRadius: 8))
        }
        .onTapGesture {
            print("onTapGesture: \(photo.name)")
            onPhotoTapped(photo, photos)
        }
        .contextMenu {
            Button(role: .destructive) {
                print("ContextMenu: \(photo.name)")
                onDelete(photo)
            } label: {
                Label("Delete Photo", systemImage: "trash")
            }      
        }
    }
}

// 原视图中调用子视图
List {
    Section {
        LazyVGrid(columns: columns, alignment: .leading, spacing: 8) {
            ForEach(photos) { photo in
                PhotoThumbnailView(
                    photo: photo,
                    photos: photos,
                    onPhotoTapped: onPhotoTapped,
                    onDelete: { self.photoToDelete = $0 }
                )
            }
        }
    }
}

方案3：显式捕获当前photo（辅助优化） #

在Context Menu的按钮闭包中显式添加[photo]捕获列表，确保闭包持有当前photo的强引用：

.contextMenu {
    Button(role: .destructive) { [photo] in // 显式捕获当前photo
        print("ContextMenu: \(photo.name)")
        self.photoToDelete = photo
    } label: {
        Label("Delete Photo", systemImage: "trash")
    }      
}

确保Photo结构体已经遵循Identifiable协议，且id是唯一值（比如用UUID）：

struct Photo: Identifiable {
    let id: UUID = UUID()
    let name: String
    let path: String
    // 其他属性
}

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