SwiftUI中为ForEach添加元素时实现平滑动画避免按钮跳动

我希望在为数组添加元素时实现平滑的动画效果，但当前添加ForEach元素后，按钮会出现向下跳动的情况。

原代码 #

import SwiftUI

class ForEachAnimationViewModel: ObservableObject {
    @Published var array: [String] = []
    var count = 5
    
    init() {
        array = (0..<count).map({ "Element \($0)" })
    }
    
    func addMore() {
        let newItems = (count..<count+5).map({ "Element \($0)" })
        array.append(contentsOf: newItems)
    }
}

struct ForEachAnimationView: View {
    @ObservedObject var viewModel: ForEachAnimationViewModel
    var body: some View {
        ScrollView {
            ForEach(viewModel.array, id: \.self) { element in
                Text(element)
            }
            
            Button(action: {
                withAnimation {
                    viewModel.addMore()
                }
            }) {
                Text("Button")
            }
        }
    }
}

#Preview {
    ForEachAnimationView(viewModel: ForEachAnimationViewModel())
}

要实现平滑的元素添加动画并解决按钮跳动问题，可按以下方式修改代码：

核心调整点 #

• 为新增元素添加明确的过渡动画，避免布局突变
• 统一布局容器，让ScrollView内的元素结构更稳定
• 修正ViewModel中count未更新的逻辑问题

修改后的完整代码 #

import SwiftUI

class ForEachAnimationViewModel: ObservableObject {
    @Published var array: [String] = []
    var count = 5
    
    init() {
        array = (0..<count).map({ "Element \($0)" })
    }
    
    func addMore() {
        let newItems = (count..<count+5).map({ "Element \($0)" })
        array.append(contentsOf: newItems)
        count += 5 // 修正：更新count，避免重复生成相同元素
    }
}

struct ForEachAnimationView: View {
    @ObservedObject var viewModel: ForEachAnimationViewModel
    var body: some View {
        ScrollView {
            VStack(spacing: 8) {
                ForEach(viewModel.array, id: \.self) { element in
                    Text(element)
                        .transition(.move(edge: .bottom)) // 新元素从底部平滑移入
                        .animation(.easeInOut(duration: 0.3), value: viewModel.array)
                }
                
                Button(action: {
                    viewModel.addMore()
                }) {
                    Text("Button")
                }
                .padding(.top, 20)
            }
            .padding()
        }
    }
}

#Preview {
    ForEachAnimationView(viewModel: ForEachAnimationViewModel())
}

效果说明 #

1. 过渡动画：通过.transition(.move(edge: .bottom))让新元素从底部平滑滑入，配合.animation绑定数组的变化，确保动画仅作用于新增元素。
2. 布局稳定：使用VStack包裹所有元素并设置间距，避免ForEach与Button直接并列导致的布局计算异常，消除按钮跳动问题。
3. 逻辑修正：更新count变量，保证每次添加的都是全新的元素，避免重复生成。

如果偏好淡入效果，可将过渡替换为：

.transition(.opacity)

内容的提问来源于stack exchange，提问作者P. Sami