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

您需要将不透明度直接链接到状态，以便它直接为任何更改设置动画。

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

编辑：反映要求删除视图的评论，而不仅仅是淡出...

要删除视图（并触发 .onDisappear），您可以修改如下：

         ZStack {
            Color.black
            show ? (RoundedRectangle(cornerRadius: 20)
               .fill(.brown)
            ).onDisappear{print("gone")}
            : nil
         }

这将如上淡入/淡出，但实际上会删除视图并打印“消失”