SwiftUI中ForEach数据源结构优化：解决元素删除顺序异常问题

问题根源 #

你遇到的删除异常，核心原因是使用数组索引作为ForEach的标识（id: \.self）。当数组元素被删除后，剩余元素的索引会重新排列，SwiftUI无法正确追踪每个视图对应的原始数据源，导致点击删除时操作的索引已经和实际元素不匹配。

解决方案 #

改用带唯一标识符的自定义数据结构，让每个图标元素拥有独立的唯一ID，确保SwiftUI能准确关联视图与数据。具体步骤如下：

1. 定义遵守Identifiable协议的结构体，为每个元素生成唯一ID
2. 修改数组类型为自定义结构体数组
3. 调整按钮添加逻辑与删除逻辑

修改后的完整代码 #

import SwiftUI

// 自定义带唯一标识的图标数据结构
struct IconItem: Identifiable {
    let id = UUID() // 自动生成唯一ID
    let iconType: Int // 对应原有的0-3，标记图标类型
}

struct ContentView: View {
    
    @State var items: [IconItem] = []
    
    let systemDictionary: [Int : Image] = [
        0 : Image(systemName: "plus.circle"),
        1 : Image(systemName: "minus.circle"),
        2 : Image(systemName: "multiply.circle"),
        3 : Image(systemName: "divide.circle")
    ]
    
    var body: some View {
        VStack {
            HStack {
                Button {
                    items.append(IconItem(iconType: 0))
                } label: {
                    Text("Button 0")
                }
                Button {
                    items.append(IconItem(iconType: 1))
                } label: {
                    Text("Button 1")
                }
                Button {
                    items.append(IconItem(iconType: 2))
                } label: {
                    Text("Button 2")
                }
                Button {
                    items.append(IconItem(iconType: 3))
                } label: {
                    Text("Button 3")
                }
            }
            // 直接遍历自定义结构体数组，Identifiable自动提供唯一id
            ForEach(items) { item in
                systemDictionary[item.iconType]
                    .font(.system(size: 30))
                    .padding()
                    .onTapGesture {
                        // 通过唯一id找到元素索引并删除
                        if let index = items.firstIndex(where: { $0.id == item.id }) {
                            items.remove(at: index)
                        }
                    }
            }
        }
    }
}

关键说明 #

• IconItem的id用UUID()生成，确保每个添加的图标元素都有独一无二的标识，不受数组元素顺序变化影响
• ForEach直接遍历items数组，因为IconItem遵守Identifiable，SwiftUI会自动用id来追踪每个视图，避免索引混乱
• 删除时通过firstIndex(where:)根据唯一id定位元素，确保删除的是用户点击的那个图标

内容的提问来源于stack exchange，提问作者Hyun Bin CHo