Clipped not actually clips the Image in SwiftUI

Question

I am trying to clip the image and as we see the UI it looks fine but actually it doesn't clip the image which causes other UI elements to unresponsive.

Here the code I am using.

struct ImageContentView: View {
    var urls:[String] = [
        "https://lh3.googleusercontent.com/proxy/80im-IBfLODpLDj8d02uEpSVIhqdjen6H6CeFwgRBxeua-Dgw0R3WONFj1Gk8CwB_MufmC9rQ8qHjyWMejwFcJ1PA2s8AAu5WVsmJA=s0-d",
        "https://wallpaperaccess.com/full/530919.jpg"
    ] 
    var body: some View {
        ScrollView{
            VStack{
                Button(action: {
                    
                }, label: {
                    Text("Hello")
                })
                VStack(spacing: 20.0) {
                    ForEach(self.urls, id:\.self) { url in
                        WebImage(url: URL.init(string: url)!)
                            .resizable()
                            .aspectRatio(contentMode: ContentMode.fill)
                            .frame(height: UIScreen.main.bounds.size.width * 0.5) 
                            .clipped()
                            .cornerRadius(10.0)
                            .shadow(color: Color.red, radius: 10.0, x: 0, y: 0)
                    }
                }.padding()
            }
        }
    }
}

I tried ContentShape as well as ClipShape but didn't work. – Malav Soni Aug 07 '20 at 11:06 — Malav Soni, Aug 07 '20 at 11:06
Any update on this one? Did you find a solution? – PinkiePie-Z Nov 05 '21 at 02:23 — PinkiePie-Z, Nov 05 '21 at 02:23
clipShape and contentShape work for me – onmyway133 Dec 28 '22 at 21:21 — onmyway133, Dec 28 '22 at 21:21

score 7 · Answer 1 · answered Aug 07 '20 at 11:53

7

Here is fixed part (tested with Xcode 12 / iOS 14)

VStack(spacing: 20.0) {
    ForEach(self.urls, id:\.self) { url in
        WebImage(url: URL.init(string: url)!)
            .resizable()
            .aspectRatio(contentMode: ContentMode.fill)
            .frame(height: UIScreen.main.bounds.size.width * 0.5)
            .clipped()
            .cornerRadius(10.0)
            .shadow(color: Color.red, radius: 10.0, x: 0, y: 0)
    }.contentShape(Rectangle())   // << here !!
}.padding()

Note: I don't know what is your WebImage but with Image and local images it was reproduced as well, so fix was tested.

answered Aug 07 '20 at 11:53

Asperi

228,894
20
464
690

WebImage is from SDWebImageSwiftUI library – Malav Soni Aug 07 '20 at 12:08
2

This doesn't work for me. I am downloading the image from URL and display it – Malav Soni Aug 07 '20 at 12:24
1

Then it is bug in WebImage as well, because above works for Image. You can try also to put .contentShape on VStack. – Asperi Aug 07 '20 at 12:32
1

Thanks! Simply adding the contentShape Rectangle modifier solved the problem for me. – Linus Feb 17 '21 at 22:17
It should be noted that it's important that the `.contentShape(Rectangle())` line should be any line after `.clipped()` – Amirca May 14 '22 at 17:54

score 2 · Answer 2 · answered Dec 07 '22 at 03:51

I have tried for the above methods but still not working. Here is another solution for someone who have the same struggle, maybe this can help you :) This line is to disable the tap gesture of the image.

Image(uiImage: image)
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: 100, height: 100)
.contentShape(RoundedRectangle(cornerRadius: 8))
.allowsHitTesting(false) // <- this is the line

score 1 · Answer 3 · answered Aug 04 '22 at 05:10

1

iOS 13 and +

An other solution is combine compositingGroup and clipped:

That wraps this view in a compositing group and clips.

Note: Respect this order compositingGroup and clipped

Image(..)            
.compositingGroup()
.clipped()

answered Aug 04 '22 at 05:10

YanSte

10,661
3
57
53

Clipped not actually clips the Image in SwiftUI

3 Answers3