How to move this to the top?

Question

I just learned how to implement specific rounded corners, but now it seems nothing will align to the top of the screen, even with spacers. How can I get it to align to the top of the screen?

Additionally, I would like the green to ignore the top safe area, but it wasn't doing that earlier either.

import SwiftUI

struct Dashboard: View {
    
    @State var bottomLeft: CGFloat = 25
    
    var body: some View {
        ZStack {
            Color("background")
                .edgesIgnoringSafeArea(.all)
            
            VStack {
                VStack {
                    Text("Good Morning, Sarah")
                        .font(Font.system(size: 36))
                        .foregroundColor(.standaloneLabelColor)
                        .fontWeight(.semibold)
                        .frame(maxWidth: .infinity, alignment: .leading)
                        .padding(.horizontal)
                    
                    Text("We're glad to see you and hope you're doing well. Let's take on the day.")
                        .font(Font.system(size: 20))
                        .foregroundColor(.standaloneLabelColor)
                        .frame(maxWidth: .infinity, alignment: .leading)
                        .padding(.horizontal)
                        .padding(.bottom)
                }
                .background(Color.appColor)
                .cornerRadius(bottomLeft, corners: .bottomLeft)
                .padding(.bottom, 10)
            
            
        }
            
            Spacer()
        }
        
    }
}

Thanks in advance.

Answer 1

You can set the alignment on the ZStack to .top. You can then also remove the Spacer.

A Spacer does nothing in a ZStack - since it's on its own layer. But setting the alignment on the ZStack will align all views to the top. If this is not what you want, you can also just put the Spacer in the inner VStack and the contents of that will all be aligned to the top also.

Code:

ZStack(alignment: .top) {
    Color("background")
        .edgesIgnoringSafeArea(.all)

    VStack {
        /* ... */
    }
}

---

Also, to ignore the safe area at the top when applying the rounded corners, you should clip the corners and use ignoresSafeArea() within background. This ensures that you are only ignoring the safe area for the background, and not the whole view. Do the following:

.background(
    Color.appColor
        .cornerRadius(bottomLeft, corners: .bottomLeft)
        .ignoresSafeArea()
)
// .background(Color.appColor)
// .cornerRadius(bottomLeft, corners: .bottomLeft)
.padding(.bottom, 10)