SwiftUI中如何无卡顿同时动画VStack的排序与内容变更？

问题描述 #

• 需求：实现列表行排序变更与行内容值更新的同步流畅动画，该效果在List组件中可正常实现，但在VStack/HStack（含ScrollView包裹的情况）中出现异常：内容标签会脱离行容器，在行位移动画完成后才跳转到最终位置。
• 具体场景：
  • 一组评论数据，每行显示评论文本和点赞数
  • 列表按点赞数从高到低排序
  • 切换数据状态时，点赞数更新与行排序变更同时触发，动画不同步

动画异常表现：标签脱离行容器，位移动画完成后才跳转至最终位置
正常表现（使用List组件）：排序与内容更新动画同步流畅

复现代码 #

可复制到新项目ContentView中复现问题，建议在模拟器中开启Debug > Slow animations查看细节：

struct ContentView: View {
    @State private var comments: [Comment] = []

    var body: some View {
        HStack {
            Text("状态1").onTapGesture { comments = [.init("Well done", 6), .init("Interesting", 5), .init("Nice", 4)] }
            Text("状态2").onTapGesture { comments = [.init("Interesting", 7), .init("Well done", 6), .init("Nice", 4)] }
        }

        // 存在动画异常的VStack实现
        VStack { ForEach(comments, content: CommentRowView.init(comment:)) }
            .padding()
            .animation(.default, value: comments)
        
        // 正常工作的List实现
        // List { ForEach(comments, content: CommentRowView.init(comment:)) }
        //    .animation(.default, value: comments)
    }
}

struct CommentRowView: View {
    let comment: Comment
    
    var body: some View {
        HStack {
            Text(comment.text).font(.largeTitle)
            Spacer()
            VStack {
                Text(comment.upvotes.formatted())
                    .contentTransition(.numericText())
                    .animation(.default, value: comment.upvotes)
            }
            .font(.title)
        }.padding().border(.gray)
    }
}

struct Comment: Identifiable, Equatable {
    var id: String { text }; let text: String; let upvotes: Int
    init(_ text: String, _ upvotes: Int) { self.text = text; self.upvotes = upvotes }
}

问题根源 #

1. 嵌套动画冲突：CommentRowView内部的独立animation修饰符会触发单独的内容过渡动画，与父容器VStack的位移动画事务分离，导致两个动画不同步。
2. 视图复用逻辑差异：List内部有专门的视图复用和动画协调机制，能自动同步排序与内容更新的动画；而VStack没有这类内置逻辑，无法协调多个独立动画。

修复方案 #

方案1：统一动画事务（推荐） #

移除子视图内的独立动画修饰符，使用withAnimation包裹数据更新操作，让位移动画与内容过渡动画共享同一个事务：

修改后的ContentView

struct ContentView: View {
    @State private var comments: [Comment] = []

    var body: some View {
        HStack {
            Text("状态1").onTapGesture {
                withAnimation(.default) {
                    comments = [.init("Well done", 6), .init("Interesting", 5), .init("Nice", 4)]
                }
            }
            Text("状态2").onTapGesture {
                withAnimation(.default) {
                    comments = [.init("Interesting", 7), .init("Well done", 6), .init("Nice", 4)]
                }
            }
        }

        // 修复后的VStack列表
        VStack {
            ForEach(comments, content: CommentRowView.init(comment:))
        }
        .padding()
    }
}

修改后的CommentRowView

struct CommentRowView: View {
    let comment: Comment
    
    var body: some View {
        HStack {
            Text(comment.text).font(.largeTitle)
            Spacer()
            VStack {
                Text(comment.upvotes.formatted())
                    .contentTransition(.numericText())
                    // 移除独立的animation修饰符，跟随父事务动画
            }
            .font(.title)
        }.padding().border(.gray)
    }
}

方案2：自定义事务精细控制 #

如果需要给位移动画和内容过渡动画设置不同的参数，可以通过Transaction手动协调：

// 在ContentView的tapGesture中
Text("状态2").onTapGesture {
    // 定义位移动画事务
    withAnimation(.easeInOut(duration: 0.5)) {
        // 给内容过渡动画单独指定事务
        let contentTransaction = Transaction(animation: .spring())
        comments = withTransaction(contentTransaction) {
            [.init("Interesting", 7), .init("Well done", 6), .init("Nice", 4)]
        }
    }
}

或者在子视图中强制继承父事务的动画：

Text(comment.upvotes.formatted())
    .contentTransition(.numericText())
    .transaction { tx in
        // 确保内容过渡动画使用父事务的动画，无则使用默认
        tx.animation = tx.animation ?? .default
    }

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