Why SwiftUI does not register my tap on Background of RoundedRectangle? - swiftui

Question

I wanted to try this down code to see if SwiftUI understand between RoundedRectangle and Rectangle, therefore I ran this code, SwiftUI could tell me the difference between Screen Background tap and Rectangle tap, but it is unable to understand between RoundedRectangle itself and Background of RoundedRectangle which is a Rectangle.
How could I solve this issue?
Goal: I want get print for white area on tap, as well I am getting for red and yellow area.
struct ContentView: View {
var body: some View {
ZStack {
Color.red
.ignoresSafeArea()
.onTapGesture{ print("you tapped on Screen Background! 🟥") }
RoundedRectangle(cornerRadius: 90)
.fill(Color.yellow)
.frame(width: 300, height: 300, alignment: .center)
.background(Color.white.onTapGesture{ print("you tapped on RoundedRectangle Background! ⬜️") })
.onTapGesture{ print("you tapped on RoundedRectangle! 🟨") }
}
}
}

Answer 1

This looks like a bug indeed.
As a workaround you can use a custom shape, e.g. RoundedCorner taken from here:
struct RoundedCorner: Shape {
var radius: CGFloat = .infinity
var corners: UIRectCorner = .allCorners
func path(in rect: CGRect) -> Path {
let path = UIBezierPath(roundedRect: rect, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
return Path(path.cgPath)
}
}
Then, it will work as expected:
struct ContentView: View {
var body: some View {
ZStack {
Color.red
.ignoresSafeArea()
.onTapGesture { print("you tapped on Screen Background! 🟥") }
Color.white
.frame(width: 300, height: 300, alignment: .center)
.onTapGesture { print("you tapped on RoundedRectangle Background! ⬜️") }
RoundedCorner(radius: 90)
.fill(Color.yellow)
.frame(width: 300, height: 300, alignment: .center)
.onTapGesture { print("you tapped on RoundedRectangle! 🟨") }
}
}
}
or, with Color.white as background:
struct ContentView: View {
var body: some View {
ZStack {
Color.red
.ignoresSafeArea()
.onTapGesture { print("you tapped on Screen Background! 🟥") }
RoundedCorner(radius: 90)
.fill(Color.yellow)
.frame(width: 300, height: 300, alignment: .center)
.onTapGesture { print("you tapped on RoundedRectangle! 🟨") }
.background(
Color.white
.onTapGesture { print("you tapped on RoundedRectangle Background! ⬜️") }
)
}
}
}