Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Why top right & left corner radius not showing up in swiftUI

When I add HeadingView() in code the top left & right corner radius is not showing up

I don’t know what is the reason

enter image description here

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

    struct CustomView: View {
    
    var body: some View {
        VStack(alignment: .leading, spacing: 0) {
            HeadingView()
            Text("Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type ..").padding()
        }
        
        .background(
            RoundedRectangle(cornerRadius: 13)
                .foregroundColor(Color.white)
                .shadow(color: Color(.red).opacity(0.5), radius: 3, x: 1, y: 1)
        )
        .padding()
        
        
    }
}

struct HeadingView: View {
    
    var body: some View {
        
        VStack(alignment: .leading, spacing: 0) {
            
            HStack(spacing: 9, content: {
                Text("Custom heading")
            })
        }
        .frame(maxWidth: .infinity, minHeight: 45, maxHeight: 45, alignment: .leading)
        .background(Color(red: 1, green: 0.75, blue: 0))
    }
}

>Solution :

The rounded rectangle is added as the background, so it is behind the yellow rectangle that is HeadingView. The non-rounded corners of HeadingView covered the rounded corners up.

One way to fix this is to clip the view using clipShape, before applying the background.

VStack(alignment: .leading, spacing: 0) {
    HeadingView()
    Text("...").padding()
}
// here:
.clipShape(RoundedRectangle(cornerRadius: 13))

.background(
    RoundedRectangle(cornerRadius: 13)
        .foregroundColor(Color.white)
        .shadow(...)
)

Effectively, this is "cutting off" the unrounded corners of HeadingView, so it won’t cover the rounded corners of the white background.

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading