SwiftUI使用ForEach索引遍历数组时图形闪烁的机制探究

我正在用SwiftUI开发iOS应用，当在ForEach循环里用状态数组的索引而非元素本身时，出现了图形故障：尝试重新排序列表时，UI元素会闪烁甚至消失。

“步骤”部分动画正常，而“食材”部分出现故障

“添加食谱”视图简化示例 #

两个部分的唯一区别在于，一个ForEach遍历数组索引，另一个遍历元素本身：

struct TestView: View {
    @State private var testData = ["Test 1", "Test 2"]

    var body: some View {
        NavigationStack {
            Form {
                Section("食材") {
                    ForEach(testData.indices, id: \.self) {
                        Text(testData[$0])
                    }
                    .onMove {
                        testData.move(fromOffsets: $0, toOffset: $1)
                    }
                }
                
                Section("步骤") {
                    ForEach(testData, id: \.self) {
                        Text($0)
                    }
                    .onMove {
                        testData.move(fromOffsets: $0, toOffset: $1)
                    }
                }
            }
        }
    }
}

这问题核心出在SwiftUI的视图身份识别逻辑上：

• SwiftUI靠id来标记每个视图的“身份”，以此判断要更新现有视图还是销毁重建新视图。
• 用testData.indices加id: \.self时，每个视图的身份绑定的是数组的索引（0、1这类数字）。比如一开始索引0对应"Test 1"，索引1对应"Test 2"。排序后，数组元素位置交换，索引0的内容变成"Test 2"，索引1变成"Test 1"。SwiftUI会觉得“原来的索引0视图还是那个视图，只是内容变了”，于是直接原地更新文本，而非执行视图移动的动画——这就导致了闪烁甚至消失的故障。
• 而直接遍历元素并以id: \.self（这里字符串内容唯一）时，每个视图的身份绑定的是元素本身。排序后，元素位置变了，但视图的身份还是对应原来的元素，SwiftUI能准确识别出“只是视图换了位置”，所以能播放平滑的移动动画，不会出问题。

如果你的数据元素可能重复，别用id: \.self，最好给数据模型加个唯一的id属性（比如让模型遵循Identifiable协议），这样不管怎么排序，SwiftUI都能精准追踪每个视图的身份，避免这类问题。

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