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

Question

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

I don't know what is the reason

    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))
    }
}

Answer 1

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(
    Rectangle()
        .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.