为什么 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, eg 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! ⬜️") }
                )
        }
    }
}