SwiftUI中在ForEach内同时实现文本内容与位置动画的问题

你的问题核心原因有两点：

• SwiftUI 默认仅对视图的布局属性（比如 frame）变化执行动画，Text 的文本内容更新不属于布局属性变更，因此不会触发默认动画，这就是圆形元素正常动但文本无动画的根本原因。
• 虽然 ForEach 通过 id 复用视图，但当 data.value 变化时，Text 直接替换内容，没有触发动画逻辑。

我们需要给数值文本添加自定义动画过渡，同时保留视图排序的动画效果。以下是修改后的完整代码：

struct ContentView: View {
    @State private var datas = (0...9).map { Data(id: $0, value: $0) }
    
    var body: some View {
        VStack {
            Button("Click Me!") {
                withAnimation(.easeInOut(duration: 3)) {
                    randomizeDataValues()
                }
            }
            VStack {
                ForEach(datas, id: \.id) { data in
                    BulletAndText(data: data)
                }
            }
        }
        .padding()
    }
    
    struct Data: Identifiable, Equatable {
        var id: Int
        var value: Int
    }
    
    func randomizeDataValues() {
        for i in 0..<datas.count {
            datas[i].value = Int.random(in: 1..<datas.count)
        }
        datas.sort(by: { d1, d2 in d1.value < d2.value })
    }
}

struct BulletAndText: View {
    let data: ContentView.Data
    @State private var animatedValue: Double = 0
    
    var body: some View {
        GroupBox {
            HStack {
                Circle()
                    .frame(height: CGFloat(data.value))
                AnimatedNumberText(value: Double(data.value))
            }
        }
        .onChange(of: data.value) { newValue in
            withAnimation(.easeInOut(duration: 3)) {
                animatedValue = Double(newValue)
            }
        }
        .onAppear {
            animatedValue = Double(data.value)
        }
    }
}

// 自定义可动画的数值文本视图
struct AnimatedNumberText: View, Animatable {
    var value: Double
    
    var animatableData: Double {
        get { value }
        set { value = newValue }
    }
    
    var body: some View {
        Text("\(Int(value.rounded()))")
    }
}

• 让 BulletAndText 接收完整的 Data 对象，而非单独的数值，确保能准确追踪数据变化。
• 自定义 AnimatedNumberText 实现 Animatable 协议，让数值变化时被 SwiftUI 自动插值，实现从旧值到新值的平滑过渡动画。
• 通过 onChange 监听 data.value 的变化，触发插值数值的动画更新，保证文本与圆形元素的动画同步。

修改后，点击按钮时，视图会根据排序结果平滑调整位置，同时文本数值也会从旧值逐渐过渡到新值，完全满足需求。

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