Module 3: The Restaurant App (Tapping photo to bring up sheet)

App Development
1

Hi,

I’m not sure if anyone is experiencing this, but I’ve followed the instruction where you clip the horizontal photo to stay within its boundary. However, even though the image is clipped from the view itself, the onTapGesture actually gets applied to the “unclipped” photo. So when you click the right side of R3C1, it actually shows R3C2’s photo (because this overflows to the left). Does anyone know the solution to this?

Image(p)
.resizable()
.aspectRatio(contentMode: .fill)
.frame(maxWidth: (proxy.size.width-20)/3)
.clipped()
.onTapGesture {
selectedPhoto = p
sheetVisible = true

2

I actually found the solution on StackOverFlow after a bit of googling.

Basically the .clipped() modifier only applies to how the image looks, so it’s not restricting its Tappable area even though you cannot visibly see it.

We need to add another .contentShape(Rectangle()) modifier right after .clipped() modifier. This will solve the issue.

2 Likes