如何让SwiftUI中的过渡视图在动画结束前保持自身zIndex？

问题根源 #

当条件渲染的视图执行移除过渡动画时，SwiftUI会将该视图的布局层级调整到ZStack底层，导致动画过程中Circle被Button遮挡，这就是你遇到的移除时层级错误的原因。

方案1：使用Overlay绑定上层视图 #

将Circle作为Button的Overlay，确保它始终处于Button的上层，无论动画状态如何：

struct ContentView: View {
    
    @State private var show: Bool = false
    
    var body: some View {
        
        ZStack {
            Button("show") {
                withAnimation(.linear(duration: 1.5)) {
                    show.toggle()
                }
            }
            .foregroundColor(.black)
            // 将Circle作为Button的overlay，始终保持上层
            .overlay(
                Group {
                    if show {
                        Circle()
                            .fill(.blue)
                            .frame(width: 100, height: 100)
                            .transition(AnyTransition.asymmetric(insertion: .offset(x: 0, y: 300), removal: .offset(x: 0, y: 300)))
                            .onTapGesture {
                                withAnimation(.linear(duration: 1.5)) {
                                    show.toggle()
                                }
                            }
                    }
                }
            )
        }
        .frame(width: 300, height: 300)
        .padding()
    }
}

方案2：保留视图容器，用透明度控制显隐 #

让Circle始终存在于ZStack中（放在Button之后，默认上层），通过opacity结合过渡动画实现显隐，避免视图被移除时的层级调整：

struct ContentView: View {
    
    @State private var show: Bool = false
    
    var body: some View {
        
        ZStack {
            Button("show") {
                withAnimation(.linear(duration: 1.5)) {
                    show.toggle()
                }
            }
            .foregroundColor(.black)
            
            // 始终保留Circle视图，通过透明度和过渡控制显隐
            Circle()
                .fill(.blue)
                .frame(width: 100, height: 100)
                .opacity(show ? 1 : 0)
                .transition(AnyTransition.asymmetric(insertion: .offset(x: 0, y: 300), removal: .offset(x: 0, y: 300)))
                .onTapGesture {
                    withAnimation(.linear(duration: 1.5)) {
                        show.toggle()
                    }
                }
        }
        .frame(width: 300, height: 300)
        .padding()
    }
}

两种方案都无需使用zIndex修饰符，通过调整布局结构或视图存在状态，确保动画过程中Circle始终处于Button上层。

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