SwiftUI中含LazyVGrid的Transition动画异常问题求助

核心问题根源 #

你的问题出在动画触发方式不对，加上LazyVGrid的惰性加载特性，导致内部内容提前渲染，和外层视图的滑入过渡不同步。

具体修复步骤 #

1. 用withAnimation控制状态切换（替代视图上的animation修饰符）

SwiftUI 15+ 推荐通过包裹状态变化来触发动画，而非直接在视图上添加animation修饰符，这样能确保动画时机完全同步。

比如在触发显示/隐藏的按钮里：

Button("打开数字键盘") {
    withAnimation(.easeInOut(duration: 2.0)) {
        showNumPad.toggle()
    }
}

2. 给滑入视图添加clipped()防止内容溢出

LazyVGrid的内容可能会在视图完全滑入前就超出容器边界显示，添加clipped()可以裁剪超出部分：

ZStack{
    // 其他视图
    if showNumPad {
        AddExpenseNumPadView()
            .frame(maxWidth: 355)
            .background(Color.green)
            .transition(.move(edge: .trailing))
            .clipped() // 关键：裁剪超出容器的内容
    }
}

3. 同步内部视图的过渡动画

给AddExpenseNumPadView内部的容器添加过渡，让LazyVGrid的内容和外层视图的滑入动画同步：

struct AddExpenseNumPadView: View {
    let columns = [GridItem(.flexible()), GridItem(.flexible()), GridItem(.flexible())]
    let numbers = ["1","2","3","4","5","6","7","8","9","0",".","C"]
    
    var body: some View {
        VStack {
            LazyVGrid(columns: columns, spacing: 16) {
                ForEach(numbers, id: \.self) { num in
                    Text(num)
                        .font(.title)
                        .frame(height: 60)
                        .background(Color.white)
                        .cornerRadius(8)
                }
            }
            .padding()
        }
        .transition(.opacity) // 让内部内容随外层视图同步淡入
    }
}

4. 可选：替换LazyVGrid为普通VGrid

如果上述方案仍有延迟，可能是LazyVGrid的惰性加载导致布局计算滞后，尝试换成非惰性的VGrid（内容不多时性能影响可忽略）：

// 把LazyVGrid改成VGrid
VGrid(columns: columns, spacing: 16) {
    // 内容不变
}

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