SwiftUI中使用ForEach的id时，如何为数组索引添加动画？

原方案问题分析 #

当前实现通过遍历修改每个元素的index值再执行排序来实现元素位置变化，排序操作的时间复杂度为O(n log n)，在大数据组场景下会带来明显的性能损耗，且逻辑冗余。

优化方案 #

直接操作数组元素的位置，利用SwiftUI的ForEach基于id追踪元素的特性自动触发动画，无需修改元素内部属性或执行排序，时间复杂度降至O(n)，逻辑更简洁。

优化后代码 #

struct ContentView: View {
    @State private var array: [MyType] = [MyType("A"), MyType("B"), MyType("C"), MyType("D")]
    
    var body: some View {
        VStack(spacing: 10.0) {
            ForEach(array, id: \.id) { item in
                Text(item.string)
                    .frame(width: 25, height: 25)
                    .background(Color.gray.opacity(0.5).cornerRadius(5.0))
            }
            .animation(.default, value: array)

            Button("Move to down") {
                // 直接操作数组：将最后一个元素移到首位，实现等价的位置循环效果
                guard !array.isEmpty else { return }
                let lastItem = array.removeLast()
                array.insert(lastItem, at: 0)
            }
        }
        .fixedSize()
        .padding()
    }
}

struct MyType: Equatable {
    let id: UUID = UUID()
    let string: String
    
    init(_ string: String) {
        self.string = string
    }
}

关键优化点 #

• 移除了MyType中的index属性及相关静态计数逻辑，简化数据结构
• 按钮动作直接通过removeLast()和insert(at:)操作数组元素位置，避免遍历修改+排序的冗余操作
• 保留原有的动画逻辑，ForEach会基于元素的id自动识别位置变化并触发过渡动画

扩展说明 #

如果你的需求是其他位置调整逻辑，核心思路依然是直接操作数组元素位置，而非修改内部属性再排序，这样能最大化性能表现。

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