Button click triggers although clicking on button below

Viewed 141

I have following code. Two big buttons at the top and a ScrollView with many buttons below:

struct ContentView: View {
    var body: some View {
        VStack (spacing: 0) {
            HStack (spacing: 0) {
                Button(action: {}, label: {Image("button_background")})
                Button(action: {}, label: {Image("button_background")})
            }
            ScrollView {
                LazyVGrid(columns: [GridItem(.adaptive(minimum: 64))], spacing: 0) {
                    ForEach(1...4, id: \.self) { number in
                        Button(action: {}, label: {
                            ZStack {
                                Color(.gray)
                                Text("A").foregroundColor(.white)
                            }
                        })
                    }
                }
            }
        }
    }
}

But when I click on one of the buttons in the first row in the ScrollView the button in the HStack above gets triggered. For example look at the photo below. I click on the "A" (the black dot, I wasn't able to show the cursor) but the big Button above gets triggered (and becomes gray). How can I fix that?

XCode Version 12.3

example

1 Answers

You can control the tappable area of a view using .contentShape().

In your case you can add .contentShape(Rectangle()) after HStack.

Related