I'm having an issue with SwiftUI where only the top part of the button is clickable, while the bottom part is not clickable at all.
Here is my code snippet. Does anyone know how I can fix this?
var body: some View {
VStack(spacing: 0) {
ScrollView(.horizontal) {
HStack {
Button(action: {}, label: {
ZStack {
Color.green
Text("Button")
.padding(8)
.contentShape(Rectangle())
}
})
}
}
.background(Color.blue)
.frame(height: 40)
TabView {
ZStack {
Color.yellow
Text("my view")
}
}
}
}
}
I've no sure explanation, but it seems that the TabView is overlaying the button and intercepting the taps.
I made it work by adding a Spacer:
struct ContentView: View {
var body: some View {
VStack(spacing: 0) {
ScrollView(.horizontal) {
HStack {
Button(action: {print("Button tapped")}, label: {
ZStack {
Color.green
Text("Button")
.padding(8)
.contentShape(Rectangle())
}
})
}
}
.background(Color.blue)
.frame(height: 40)
Spacer() // <<-- ADDED this
TabView {
ZStack {
Color.yellow
Text("my view")
}
.onTapGesture {
print("View tapped")
}
}
}
.background(Color.yellow) // <<-- ADDED this so that Spacer is yellow as well and not white
}
}
You could file a bug report if you don't get a better explanation here.