Clipping image prevents button from being tapped

Question

Created Aug ’20

Replies 1

Boosts 1

Views 3.1k

Participants 4

Within my app, I have an Image that I am modifying with several modifiers to create an ideal appearance (code sample below). When taking this approach, I am finding that anything that is "underneath" the Image becomes unusable.

In my case, I have a VStack with a Button and the Image. When the Image modifier of clipped() is applied, the Button becomes unusable (presumably because the Image is technically covering the button, but anything outside of the Image's frame is invisible).

Is there a means of allowing an object below a clipped Image to still be functional/receive touches?

Code Block VStack {
	 Button(action: {
			print("tapped!")
	 }, label: {
			Text("Tap Here")
	 })
	 Image(uiImage: myImage)
			.resizable()
			.aspectRatio(contentMode: .fill)
			.frame(height: 150.0)
			.clipped()
}

I can confirm that if I change the aspectRatio to .fit, the issue does not appear (but, of course, my Image does not appear as I'd like it to). Subsequently, if I remove the .clipped() modifier, the issue is resolved (but, again, the Image then does not appear as I'd like it to).

Boost

Answer 1

Blee37 OP

Sep ’21

I had this exact problem. If you put .contentShape(Rectangle()) after the .clipped() on the Image then it should solve the problem. This will change the clickable area of the Image to conform to the clipped area, and it should no longer cover the button.

See https://stackoverflow.com/questions/57675003/make-swiftui-tap-not-extend-beyond-bounds-when-clipped and https://stackoverflow.com/questions/63300411/clipped-not-actually-clips-the-image-in-swiftui

7