Rounded corners Swiftui starting from higher in the view

Question

I've search a lot about this but here i'm trying to get rounded corners in a view that match the rounded corners of his parent view, but i think the "rounding" starts from the middle of the child view which makes it impossible to match the parent, do someone have an idea of how i can do this ? Thanks

What i want

What i have

I simply do this for the parent

    .cornerRadius(35)

I tried the same for the child but i didn't work so i used a UIBezierPath method but the result is the same:

struct RoundedCornersShape: Shape {
let corners: UIRectCorner
let radius: CGFloat

func path(in rect: CGRect) -> Path {
    let path = UIBezierPath(roundedRect: rect,
                            byRoundingCorners: corners,
                            cornerRadii: CGSize(width: radius, height: radius))
    return Path(path.cgPath)
}

The view:

var body: some View {
    VStack {
        HStack(alignment: .center, spacing: 16, content: {
            Button(action: {}, label: {
                Image("")
                    .resizable()
                    .frame(width: 45, height: 45)
            })
            Text("")
            Spacer()
        })
        .padding(.all, 16)
        Spacer().frame(height: 1)
        
        HStack(alignment: .center, spacing: 8, content: {
            Spacer()
                .frame(width: 16, height: 40)
            Text("")
            Spacer()
            Button(action: {}, label: {
                Image("")
            })
            Button(action: {}, label: {
                Image("")
            })
            Spacer()
                .frame(width: 16, height: 40)
        })
        .background(RoundedCornersShape(corners: [.bottomLeft, .bottomRight], radius: 35)
                        .fill(Color.white))
        .padding([.bottom, .leading, .trailing], 2.0)
    }
    .padding(2)
    .background(RadialGradient(gradient: Gradient(colors: colors), center: .topTrailing, startRadius: 5, endRadius: 300))
    .cornerRadius(35)
    .shadow(radius: 10)
}

Answer 1

This is because of the height.
If you give it a similar height, the corner radius will have the same curvature.

I added the Line: .frame(width: 380, height: 150, alignment: .center)

import SwiftUI

struct RoundedCornersShape: Shape {
let corners: UIRectCorner
let radius: CGFloat

func path(in rect: CGRect) -> Path {
    let path = UIBezierPath(roundedRect: rect,
                            byRoundingCorners: corners,
                            cornerRadii: CGSize(width: radius, height: radius))
    return Path(path.cgPath)
}
}
    
struct ContentView: View {
    
    var body: some View {
        VStack {
            HStack(alignment: .center, spacing: 16, content: {
                Button(action: {}, label: {
                    Image("")
                        .resizable()
                        .frame(width: 45, height: 45)
                })
                Text("")
                Spacer()
            })
            .padding(.all, 16)
            Spacer().frame(height: 1)
            
            HStack(alignment: .center, spacing: 8, content: {
                Spacer()
                    .frame(width: 16, height: 40)
                Text("")
                Spacer()
                Button(action: {}, label: {
                    Image("")
                })
                Button(action: {}, label: {
                    Image("")
                })
                Spacer()
                    .frame(width: 16, height: 40)
            })
            .frame(width: 380, height: 100, alignment: .center)
            .background(RoundedCornersShape(corners: [.bottomLeft, .bottomRight], radius: 35)
                            .fill(Color.white))
            .padding([.bottom, .leading, .trailing], 2.0)
        }
        .padding(2)
        .background(RadialGradient(gradient: Gradient(colors: [Color.blue]), center: .topTrailing, startRadius: 5, endRadius: 300))
        .cornerRadius(35)
        .shadow(radius: 10)
    }

}
    
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}