SwiftUI中VStack视图滑入动画时间隙闪烁问题的解决咨询

问题现象 #

现有SwiftUI实现中，VStack包含Header与Detail两个组件，点击「Show View」按钮时，该VStack通过从底部滑入的过渡动画显示，但动画过程中Header和Detail之间会短暂出现间隙闪烁，动画完成后间距恢复正常。

相关代码：

struct StackAnimation: View {
    @State var show: Bool
    var body: some View {
        ZStack {
            Button {
                show.toggle()
            } label: {
                Text("Show View")
            }
            
            ZStack{
                VStack{ // animation
                    if show {
                        VStack(spacing: 0) { // VStack with no spacing
                            VStack {
                                Text("Header")
                                
                            }
                            .frame(maxWidth: .infinity, maxHeight: 30.0)
                            .background(Color.white)
                            Text("Detail")
                                .frame(maxWidth: .infinity, maxHeight: .infinity)
                                .background(Color.white)
                        }.cornerRadius(10.0).padding(.top, 20)
                            .transition(.move(edge: .bottom))
                    }
                }.animation(.spring().delay(0.3), value: show)
            }
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color.green)
        
    }
}

struct StackAnimation_Previews: PreviewProvider {
    static var previews: some View {
        StackAnimation(show: false)
    }
}

修复方案 #

问题根源在于Header和Detail分别设置了白色背景，动画过程中SwiftUI的布局计算会短暂暴露两个组件之间的间隙（即使设置了spacing:0）。解决方法是将白色背景统一设置在外层VStack上，确保整个区域是一个完整的背景块：

修改后的代码：

struct StackAnimation: View {
    @State var show: Bool
    var body: some View {
        ZStack {
            Button {
                show.toggle()
            } label: {
                Text("Show View")
            }
            
            ZStack{
                VStack{
                    if show {
                        VStack(spacing: 0) {
                            Text("Header")
                                .frame(maxWidth: .infinity, maxHeight: 30.0)
                            Text("Detail")
                                .frame(maxWidth: .infinity, maxHeight: .infinity)
                        }
                        // 统一设置背景和圆角，替代内部组件的单独背景
                        .background(Color.white)
                        .cornerRadius(10.0)
                        .padding(.top, 20)
                        .transition(.move(edge: .bottom))
                    }
                }.animation(.spring().delay(0.3), value: show)
            }
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color.green)
    }
}

struct StackAnimation_Previews: PreviewProvider {
    static var previews: some View {
        StackAnimation(show: false)
    }
}

关键修改点： #

• 移除Header和Detail各自的.background(Color.white)
• 将.background(Color.white)和.cornerRadius(10.0)移到最外层的内容VStack上，让整个区域共享一个背景
• 简化了Header的嵌套VStack（原代码中Header外层的VStack是多余的）

这样修改后，动画过程中整个视图是一个完整的白色块，不会再出现间隙闪烁的问题。

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