SwiftUI中使用@StateObject绑定List时如何添加删除滑动动画？

你当前给model.deleteItem(id)包裹withAnimation无效的核心原因是：模型内部的删除逻辑是异步执行的，@Published修饰的items数组修改时机，发生在你外层包裹的withAnimation闭包作用域结束之后，动画事务已经提交，所以不会触发动画效果。

下面是三种可行的实现方案，按推荐优先级排序： #

方案1：给List绑定动画触发条件（最省心，无需修改ViewModel代码） #

直接在你的List组件上添加animation修饰符，指定当model.items发生变化时应用动画，所有对items的增删改操作都会自动触发对应动画：

List {
    ForEach(model.items, id: \.id) { item in
        myCell(item: item)
    }
}
// 添加这一行即可，动画样式可以自定义调整
.animation(.easeInOut, value: model.items)

使用这个方案可以直接删除Alert按钮里的withAnimation包裹，不需要额外的动画声明。 #

方案2：将动画包裹放到ViewModel修改items的位置 #

如果不需要灵活控制不同场景的动画效果，可以直接在ViewModel中修改items数组的位置添加withAnimation包裹，确保数组修改发生在动画事务内：

// MyViewModel 内的删除逻辑示例
func deleteItem(_ id: MyStruct.ID) {
    // 你的异步逻辑（删数据库/请求接口等）
    someAsyncOperation { [weak self] in
        // 切回主线程修改数据
        DispatchQueue.main.async {
            withAnimation {
                self?.items.removeAll { $0.id == id }
            }
        }
    }
}

方案3：通过回调将动画控制权放到视图层（符合职责分离规范） #

如果不想把视图层的动画逻辑耦合到ViewModel中，可以给删除方法添加完成回调，在视图层的回调内包裹动画和数据修改逻辑：

第一步：修改ViewModel的删除方法 #

func deleteItem(_ id: MyStruct.ID, onAsyncTaskFinish: @escaping () -> Void) {
    // 异步删除逻辑执行完成后回调
    someAsyncOperation {
        DispatchQueue.main.async {
            onAsyncTaskFinish()
        }
    }
}

第二步：视图层调用时包裹动画 #

primaryButton: .destructive(Text("Delete")) {
    model.deleteItem(id) {
        withAnimation(.easeInOut) {
            model.items.removeAll { $0.id == id }
        }
    }
}

注意事项 #

• 确保MyStruct的id属性是唯一稳定的，SwiftUI需要通过id识别条目变化才能触发正确的单个单元格动画
• 确保items数组的所有修改操作都在主线程执行，否则不会触发UI更新和动画
• 如果需要自定义删除动画效果，可以给myCell添加transition修饰符，比如.transition(.slide)就是指定滑入滑出的过渡效果

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