SwiftUI unable to click buttons in overlay/popover screen

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)
    }
}

user_9982386 · Answer

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:

SwiftUI unable to click buttons in overlay/popover screen

1 Answers