SwiftUI：淡出视图

Question

我有以下代码：

struct ContentView: View {
    
    @State var show = false
    
    var body: some View {
        
        VStack {
            
            ZStack {
                
                Color.black
                
                if show {
                    RoundedRectangle(cornerRadius: 20)
                        .fill(.brown)
                        .transition(.opacity)
                }
                
            }
            
            Button {
                withAnimation(.easeInOut(duration: 1)) {
                    show.toggle()
                }
            } label: {
                Text("TRIGGER")
            }

        }

    }
    
}

我希望 RoundedRectangle 淡入和淡出。现在它只是淡入。这是我拥有的更复杂视图设置的简化版本。根据状态，我可能会看到我想要淡入或不淡入的视图。因此，我正在寻找一种淡入的方法（就像现在一样），然后淡出，以便视图完全从层次结构中删除，而不仅仅是隐藏或其他东西。

我怎样才能让这段代码淡出视图而不只是淡入？

作为参考，我遵循了这种方法：

https://swiftui-lab.com/advanced-transitions/

....
if show {
    LabelView()
         .animation(.easeInOut(duration: 1.0))
         .transition(.opacity)
    }
        
    Spacer()
        
    Button("Animate") {
        self.show.toggle()
    }.padding(20)
....

但是，就我而言，它并没有消失。

Answer 1

SwiftUIZStack转换非常挑剔。您需要添加一个zIndex以确保保留层次结构，从而启用动画。

RoundedRectangle(cornerRadius: 20)
    .fill(.brown)
    .transition(.opacity)
    .zIndex(1) /// here!