1

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

        }
    }
}

enter image description here

pawello2222
  • 46,897
  • 22
  • 145
  • 209
  • 2
    Having played with this a bit I started thinking that this is a SwiftUI bug, unfortunately. – Asperi Dec 26 '20 at 20:11
  • Me too, I spend lot‘s of time on, I even filled this Rectangle with Color.Clear, and I draw the white and yellow area in background of the spoken Rectangle with a ZStack! but failed to understand between them, it can draw correctly but can not understand deference! LoL, New day New Bug with SwiftUI. –  Dec 26 '20 at 20:23

1 Answers1

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! ⬜️") }
                )
        }
    }
}
pawello2222
  • 46,897
  • 22
  • 145
  • 209
  • that is fantastic! thanks. 1 more thing you can give that white color as background color for Shape in ContentView, and it would also working! But you done the job! thanks again –  Dec 26 '20 at 21:38
  • thanks! that is perfect! If you try my first code with Circle, it would work perfectly no issue, but I do not know what happens with RoundedRectangle, which is make problem, I tried to clip and other things on RoundedRectangle, but as you know Nothing. –  Dec 26 '20 at 21:43
  • 1
    @mimi Yes, I've checked that it works correctly with a `Circle` but incorrectly with most of other shapes, like `Rectangle().cornerRadius(90)`, `RoundedRectangle`, `Capsule`... It looks like it's just another SwiftUI bug. – pawello2222 Dec 26 '20 at 21:48
  • 1
    I recommend that you send your solution to apple team, they can use your codes for other shapes to solve tap issue. but you should decide. –  Dec 26 '20 at 21:53