Clipped not actually clips the Image in SwiftUI

user_3573818 0
Viewed 1704

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.

enter image description here

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()
            }
        }
    }
}
sdwebimage clipped xcode11 swiftui imageview
2 Answers

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.

user_122990300

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()
user_37654570
Related