SwiftUI中如何通过ForEach子视图按钮删除结构化数组元素

核心思路 #

不要直接传递索引给子视图，而是通过闭包让子视图触发父视图的删除操作——因为数组的状态属于父视图，子视图只负责交互触发，这样能避免索引错位的问题，也更符合SwiftUI的状态管理逻辑。

步骤实现 #

1. 让数据模型遵循Identifiable（推荐）

给Plane结构体添加唯一标识，方便ForEach安全遍历：

struct Plane: Identifiable {
    let id = UUID() // 自动生成唯一ID
    var name: String
    // 你的其他属性
}

2. 父视图中传递删除闭包给子视图

在父视图的ForEach里，直接为每个子视图绑定删除逻辑：

struct ParentView: View {
    @State private var planes: [Plane] = [
        Plane(name: "波音747"),
        Plane(name: "空客A380")
    ]
    
    var body: some View {
        ScrollView {
            ForEach(planes) { plane in
                PlaneCellView(plane: plane) {
                    // 父视图中处理删除：通过ID匹配移除对应元素
                    planes.removeAll { $0.id == plane.id }
                }
            }
            .padding(.horizontal)
        }
    }
}

3. 子视图接收闭包并触发删除

在PlaneCellView中定义闭包属性，点击删除按钮时执行闭包：

struct PlaneCellView: View {
    let plane: Plane
    var onDelete: () -> Void // 定义删除触发闭包
    
    var body: some View {
        HStack {
            VStack(alignment: .leading) {
                Text(plane.name)
                    .font(.headline)
                // 显示其他Plane属性
            }
            Spacer()
            Button(action: onDelete) {
                Image(systemName: "trash")
                    .foregroundColor(.red)
            }
        }
        .padding(.vertical, 8)
    }
}

备选方案：使用索引（不推荐，仅作参考） #

如果因为某些原因必须用索引，确保ForEach绑定数组索引，并传递删除闭包（不要直接传索引让子视图修改数组）：

// 父视图中的ForEach写法
ForEach(planes.indices, id: \.self) { index in
    PlaneCellView(plane: planes[index]) {
        planes.remove(at: index)
    }
}

⚠️ 注意：这种方式在数组元素顺序变化（比如排序、插入）时，索引可能对应错误的元素，所以优先推荐基于Identifiable的ID匹配方式。

为什么之前的id: \.self没生效？ #

如果你的Plane结构体没有遵循Identifiable，且直接用ForEach(planes, id: \.self)，当两个Plane实例的属性完全相同时，SwiftUI无法区分它们，会导致视图刷新异常。添加Identifiable协议是最稳妥的解决方式。

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