Show and Hide Everything in a VStack

Question

I have a custom SwiftUI View where in an HStack I have two VStacks on opposite ends.

I need each to have its own double-tap gesture to show and hide the items in the VStack.

Here is what I have tried:

@State var displayRewind = false

VStack {
    Image("rewind")
         .frame(width: 74, height: 32, alignment: .center)
         .foregroundColor(Color.white)
         .opacity(self.displayRewind ? 1 : 0)
    Text("x seconds")
         .opacity(self.displayRewind ? 1 : 0)
 }
 .onTapGesture(count: 2) {
      withAnimation {
           displayRewind.toggle()
      }
                    
      DispatchQueue.main.asyncAfter(deadline: .now()+1) {
           withAnimation {
                displayRewind.toggle()
           }
      }
 }

Right now with this, nothing happens. If I remove the opacity on the Text, I see the text and I can double-tap to reveal the image.

The goal would be to show and hide these together.

Answer 1

if you use opacity=0, it prevents the tap event. This is the code I use for my test, using opacity=0.01:

VStack (spacing: 40) {
    Image(systemName: "globe")
        .frame(width: 74, height: 32, alignment: .center)
        .foregroundColor(Color.blue)
    Text("x seconds")
}
.opacity(displayRewind ? 1 : 0.01)
.onTapGesture(count: 2) {
    withAnimation {
        displayRewind.toggle()
    }
    
    DispatchQueue.main.asyncAfter(deadline: .now()+2) {
        withAnimation {
            displayRewind.toggle()
        }
    }
}