SwiftUI unable to click buttons in overlay/popover screen - ios

Question

I have a view that I present at the top of other views like a popover view, inside the view I have a couple of buttons. When I add a single button in the overplayed view and tap the button it works. However if I added multiple buttons and try to tap the buttons they don't work. Instead it clicks to the components bellow the view.
I would like to add multiple buttons and click them on the overlay view, I'm not sure what my mistake is on this code:
Here is my code:
struct MenuContent: View {
var body: some View {
List() {
ForEach(0..<2) { _ in
HStack {
ForEach(0..<4) { _ in
Button(action: {
print("tapped button")
}) {
VStack {
Text("Rev")
Image("trash.fill")
.resizable()
.scaledToFit()
.frame(width: 60, height: 60)
}
}.background(Color.blue)
}
}
}
}
}
}
OverlayView
struct OverlayMenu: View {
let width: CGFloat
#Binding var show: Bool
var body: some View {
return ZStack {
HStack {
MenuContent()
.frame(width: self.width, height: 160)
.cornerRadius(10, antialiased: false)
.offset(x: self.show ? 0 : -self.width, y: 285)
.animation(.spring())
Spacer()
}
.shadow(radius: 20)
}
}
}
ContentView
struct ContentView: View {
#State var show = true
var body: some View {
OverlayMenu(width: 350,
show: $show)
}
}

Answer 1

I think there is some trouble with List rows and tap gestures on them. You can deal with it if you want or you may try VStack instead of List and use Divider to divide "rows" and taps on the buttons will be handle as you expect. I changed your example a little to show how it works, I think you can handle design by yourself then:
struct MenuContent: View {
#State var hits = 0
var body: some View {
VStack {
Text("\(hits)")
Divider().frame(width: 250)
ForEach(0..<2) { _ in
ButtonsLine(hits: self.$hits)
Divider().frame(width: 250)
}
}
}
}
struct ButtonsLine: View {
#Binding var hits: Int
var body: some View {
HStack {
ForEach(0..<4) { value in
Button(action: {
print("tapped button")
self.hits += value + 1
}) {
ButtonDesign()
}
}
}
}
}
struct ButtonDesign: View {
var body: some View {
VStack {
Text("Rev")
.foregroundColor(.black)
Image(systemName: "trash")
.resizable()
.scaledToFit()
.foregroundColor(.red)
.frame(width: 60, height: 60)
}
.shadow(radius: 20)
}
}
and the result is: