SwiftUI ScrollView's onTapGesture getting called for child events
Here's a straightforward solution using GeometryReader
and a VStack
container for your ScrollView
content:
struct ContentView: View {
var body: some View {
GeometryReader { contentView in
ScrollView {
VStack {
Rectangle()
.fill(Color.red)
.frame(width: 200, height: 200)
.onTapGesture {
print("Rectangle onTapGesture")
}
}
.frame(minWidth: contentView.size.width, minHeight: contentView.size.height, alignment: .top)
.contentShape(Rectangle())
.onTapGesture {
print("ScrollViewArea onTapGesture")
}
}
}
}
}
This gives you a VStack
container that is always exactly the same size as its parent ScrollView
because of the dynamic values we get from GeometryReader
's size
property.
Note that the alignment: .top
on this container is there to make it behave like a normal ScrollView
would, anchoring scrolling items to the top. The added bonus is that if you remove that alignment
attribute your scrolling items will start from the middle of the screen—something I've found to be impossible to do before stumbling on that solution. This could be interesting UX-wise as shorter lists could make sense to be centered vertically. I digress.
Final note is the .contentShape
modifier being used to make the new VStack
's empty space tappable, which fixes your problem.
This idea was taken from this Hacking with Swift ScrollView effects using GeometryReader article outlining how you can push this idea to another level, transforming elements as you scroll. Very fun stuff!
Gesture
in SwiftUI works differently to how UITapGestureRecognizer
previously worked. i.e it recognises gestures simultaneously by default. If you want to capture only certain gestures with precedence, then you need to use an ExclusiveGesture
view modifier onto a gesture, and not use the default onTapGesture
.
TapGesture
erroneously detected touches as it's too responsive (it has a minuscule minimum duration ~ 0.0001s). I easily fixed this by replacing TapGesture
with a more reasonable minimumDuration
:
LongPressGesture(minimumDuration: 0.001)
Note that you can reduce or increase the minimum duration as per your needs, but this was the most stable when I tested.
This is probably a SwiftUI bug by the way, and I would encourage you to file a bug report outlining the issue.
Here's the code:
struct ContentView: View {
var tap: some Gesture {
LongPressGesture(minimumDuration: 0.001)
.exclusively(before: scrollTap)
.onEnded { _ in
print("Rectangle onTapGesture")
}
}
var scrollTap: some Gesture {
LongPressGesture(minimumDuration: 0.001)
.onEnded { _ in
print("ScrollView onTapGesture")
}
}
var body: some View {
ScrollView() {
Rectangle()
.fill(Color.red)
.frame(width: 200, height: 200)
.gesture(tap)
}.gesture(scrollTap, including: .gesture)
}
}
If you have multiple views you want to exclusively ignore, use the exclusively
view modifier multiple times (chained), or the sequenced
if you want to reverse the capturing order. You can check the Gesture docs for details.