Custom Corners and Background color layer-CodePudding

Trying to add a custom layer with rounded corners on my app, but it seems to be not registering. Also trying to add the background layer to it but it seems to be ignoring it and only accepting the initial declaration which is Color.white

Any help would be appreciated thanks!

import SwiftUI

struct LoginPage: View {
    @StateObject var loginData: LoginPageModel = LoginPageModel()
    var body: some View {
        VStack{
            
            VStack{
                
            }
            ScrollView(.vertical, showsIndicators: false){

            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(
                Color.white
                //CustomCorners
                    .clipShape(CustomCorners(corners: [.topLeft,.topRight], radius: 45))
                    .ignoresSafeArea()
            )
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color(#colorLiteral(red: 0.04, green: 0.09, blue: 0.05, alpha: 1.00))
                        .edgesIgnoringSafeArea(.all))
    }
}


struct LoginPage_Previews: PreviewProvider {
    static var previews: some View {
        LoginPage()
    }
}


struct CustomCorners: Shape {
    
    var corners: UIRectCorner
    var 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)
    }
}

CodePudding user response：

Your first .ignoresSafeArea() on the .clipShape makes the custom clipped background stretch over the safe areas, so you don't see the rounded edges anymore, and it also fully covers the dark second background.
I'm not sure with end result you aim for, but this shows the round edges on the top:

    .clipShape(CustomCorners(corners: [.topLeft,.topRight], radius: 45))
    .ignoresSafeArea(edges: .bottom)

CodePudding user response：

also to clip top and bottom you could do this

clipShape(CustomCorners(corners: .allCorners, radius: 45)) .ignoresSafeArea(edges: .horizontal)