SwiftUI - Multiple views react simultaneously to gesture?

Question

I am attempting to allow one tap gesture to trigger different views that are in a ZStack. When I tap on the red square that is superimposed on the yellow square, I would like both to react to the touch.

So if I tap on the red square, I should receive the printout "Red rectangle tapped" and "Yellow rectangle tapped". And not only "Red rectangle tapped".

Is there any easy way to do this?

struct MultiTouchView: View {
    var body: some View {
        ZStack(alignment: .center) {
            Rectangle()
                .foregroundColor(.yellow).opacity(0.3)
                .onTapGesture {
                    print("Yellow rectangle tapped")
                }
            
            Rectangle()
                .foregroundColor(.red)
                .frame(width: 200, height: 200)
                .onTapGesture {
                    print("Red rectangle tapped") // -> I would like this tap to react but also to allow the yellow rectangle to react to the same tap
                }
        }
    }
}

Bezaleel · Answer 1 · 2023-07-08T13:58:46.617

0

Add a single tap gesture to the ZStack instead. That should handle any event you want to occur on tapping both red and yellow rectangles

struct MultiTouchView: View {
var body: some View {
    ZStack(alignment: .center) {
                Rectangle()
                    .foregroundColor(.yellow).opacity(0.3)
                    .onTapGesture {
                        print("Yellow rectangle tapped")
                    }
                
                Rectangle()
                    .foregroundColor(.red)
                    .frame(width: 200, height: 200)
                    .onTapGesture {
                        print("Red rectangle tapped") // -> I would like this tap to react but also to allow the yellow rectangle to react to the same tap
                    }.simultaneousGesture(
                        TapGesture()
                            .onEnded { _ in
                                print("Yellow rectangle tapped")// outer simultaneous tap
                            }
                    )
            }

} }

edited Jul 08 '23 at 13:58

answered Jul 08 '23 at 12:25

Bezaleel

177
4
12

Unfortunately that does not give me the functionality I need. I want both views to react when I tap the red but only the yellow to react when I tap the yellow. Also I want to keep the functionality which happens when tapped wirth the individual views (the print is only to show what happens, but I will have other functionality integrated) – Pete Jul 08 '23 at 12:58
@Pete I see what you mean. Off the top of my head, maybe simultaneousGesture might work. Editing the answer to show what I mean – Bezaleel Jul 08 '23 at 13:57
The .simultaneousGesture is on the red rectangle, which means this adds the action to the red rectangle and not actually to the yellow one. Not quite the behavior I am looking for. If the red rectangle goes outside the boundary of the yellow rectangle and I tap where it is not above the yellow, it will still print "Yellow rectangle tapped". But I wonder if I could use your solution with some kind of a clipping addition. But then it will potentially get messy really fast if I use multiple views over one another. – Pete Jul 09 '23 at 06:42
You could use GeometryReader to detect when both views intersect. Use that to run a bool flag that triggers the .simultaneousGesture. Take a look at this - https://stackoverflow.com/questions/60407125/swiftui-how-can-i-detect-if-two-views-are-intersecting-each-other – Bezaleel Jul 09 '23 at 11:37
Perfect, this is how I resolved it. Thanks! – Pete Jul 15 '23 at 07:20

SwiftUI - Multiple views react simultaneously to gesture?

1 Answers1