2

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

L3n95
  • 1,505
  • 3
  • 25
  • 49
  • I copy pasted your code into clean SwiftUI project and everything works as expected, you click A, it triggers A, you click big button, it triggers big button. What is the problem? – Tomas Jablonskis Feb 14 '21 at 11:56
  • I am also using exactly the code I pasted above. It depends on where I click. If I click the lower half of the "A" it works as expected but if I click the "upper half" it triggers the big button. Does it even work for you if you click the "A" as high as possible? XCode Version 12.3 – L3n95 Feb 14 '21 at 11:59

1 Answers1

2

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

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

egeeke
  • 753
  • 1
  • 6
  • 18