Color in ZStack not behaving properly-CodePudding

so I'd like to lay a Color at the top of a ZStack over another view. The reason I don't want to use overlay is the Color is going to have a tap gesture attached to it. A minimal reproducible example is below. Essentially, I want the Color.secondary to be confined to the same area as the HStack (without explicitly setting frame size. Here's the code:

struct ContentView: View {
    var body: some View {
        ZStack {
            HStack {
                Spacer()
                Button(action: {
                    print("tapped button")
                }, label: {
                    Text("button")
                })
            }.background(Color.red)
            Color.secondary
                .onTapGesture {
                    print("clicked color")
                }
        }
    }
}

So I'd like the view to just be a white screen, with an HStack that looks slightly darker red.

Below is a picture of my UI. The view is greyed out during onboarding, and the user will essentially just tap the grey area to go to the next step in the onboarding. If I attach a tap gesture to the Color view and then just hide the color view according to state changes, this isn't a problem. After the onboarding is completed, the greyed area won't be there and the buttons underneath need to be interactable. When using overlays, AFTER onboarding, I don't want tapping anywhere on the view to change the app state.

https://i.stack.imgur.com/lphHg.png

CodePudding user response：

Given your further description, I believe you have the onTapGesture(perform:) in the wrong place, outside of the overlay rather than inside.

In the code below, the onTapGesture(perform:) can only be tapped on the gray overlay when it is showing. However when it is attached after the overlay, it can be tapped on when not tapping on something like the button.

Working code:

struct ContentView: View {
    @AppStorage("is_onboarding") var isOnboarding = true

    var body: some View {
        HStack {
            Spacer()

            Button {
                print("tapped button")
            } label: {
                Text("button")
            }
        }
        .background(Color.red)
        .overlay {
            if isOnboarding {
                Color.secondary
                    .onTapGesture {
                        print("clicked color")
                        isOnboarding = false
                    }
            }
        }
    }
}

If on iOS 14 not iOS 15 , use the following overlay instead:

.overlay(
    isOnboarding ?
        Color.secondary
            .onTapGesture {
                print("clicked color")
                isOnboarding = false
            }
    : nil
)