SwiftUI使用自定义列表项时List动画失效的原因及解决方法

我正在开发一个涉及SwiftUI List的项目，其中一个视图包含结构相对复杂的列表项。为降低代码复杂度，我将每个列表项封装为子视图，示例代码如下（已简化但可复现问题）：

import SwiftUI

struct SubView: View {
    var val: String
    
    var body: some View {
        Text(val)
    }
}

struct TestView: View {
    @State var objects = ["A", "B", "C", "D", "E"]
    
    var body: some View {
        List(objects, id: \.self) { ob in
            SubView(val: ob)
                .onTapGesture {
                    objects.removeAll { $0 == ob }
                }
        }
        .animation(.default, value: objects)
    }
}

#Preview {
    TestView()
}

该代码功能正常，但动画存在问题：点击删除某一项时，总是列表最后一项淡出，随后列表无动画切换为正确状态。而直接使用Text作为列表项的代码则动画正常：

import SwiftUI

struct TestView: View {
    @State var objects = ["A", "B", "C", "D", "E"]
    
    var body: some View {
        List(objects, id: \.self) { ob in
            Text(ob)
                .onTapGesture {
                    objects.removeAll { $0 == ob }
                }
        }
        .animation(.default, value: objects)
    }
}

#Preview {
    TestView()
}

这两种实现逻辑基本一致，我预期它们的动画都能正常工作，但前者不行。请问该现象的原因是什么？如何在类似第一种代码结构下维持正常动画？

问题原因 #

SwiftUI的List依赖视图标识来追踪列表项的变化，从而触发正确的动画。当你把列表项封装为自定义SubView时，默认情况下SwiftUI无法正确关联SubView和数据源中的ob，导致List无法识别被删除的是哪一项，只能错误地将最后一项作为“被移除”的目标执行动画，之后再刷新列表到正确状态。

而直接使用Text(ob)时，SwiftUI能直接将Text的内容与数据源的id绑定，正确追踪每个列表项的身份变化，动画自然正常。

解决方案 #

1. 给子视图显式绑定id #

在SubView上添加id修饰符，绑定数据源项的唯一标识，让SwiftUI能正确识别每个子视图对应的数据源项：

List(objects, id: \.self) { ob in
    SubView(val: ob)
        .id(ob) // 显式绑定数据源id
        .onTapGesture {
            objects.removeAll { $0 == ob }
        }
}
.animation(.default, value: objects)

2. 让数据源遵循Identifiable（推荐） #

如果是自定义模型数据源，更规范的做法是让模型遵循Identifiable协议，子视图接收该类型参数后，SwiftUI会自动识别视图身份：

// 扩展String遵循Identifiable（如果是自定义模型直接实现协议即可）
extension String: Identifiable {
    public var id: String { self }
}

struct SubView: View {
    var item: String
    
    var body: some View {
        Text(item)
    }
}

struct TestView: View {
    @State var objects = ["A", "B", "C", "D", "E"]
    
    var body: some View {
        List(objects) { ob in // 无需显式指定id参数
            SubView(item: ob)
                .onTapGesture {
                    objects.removeAll { $0 == ob }
                }
        }
        .animation(.default, value: objects)
    }
}

3. 将点击逻辑封装到子视图内部 #

如果子视图需要独立处理交互，可以通过闭包传递删除动作，同时保持id关联：

struct SubView: View {
    var val: String
    var onDelete: () -> Void
    
    var body: some View {
        Text(val)
            .onTapGesture(perform: onDelete)
    }
}

struct TestView: View {
    @State var objects = ["A", "B", "C", "D", "E"]
    
    var body: some View {
        List(objects, id: \.self) { ob in
            SubView(val: ob) {
                objects.removeAll { $0 == ob }
            }
            .id(ob) // 绑定id确保动画正常
        }
        .animation(.default, value: objects)
    }
}

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