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.

"I would like the green to ignore the top safe area" which color is the green? I'm assuming `Color.appColor`... but is it `Color("background")`? — aheze, Aug 07 '21 at 17:30
@aheze After using my own custom colors for that, I assume it's `Color.appColor` because it looks a bit odd (as that's the bit they are trying to get to the top, background color is already ignoring safe area). Would be nicer if it was clearer through :p — George, Aug 07 '21 at 17:37
@aheze, `Color.appColor` is the green, the background is just implementing dark mode that isn't Apple's full black because I don't like it lol. — Owen Lewis, Aug 07 '21 at 20:32

George · Accepted Answer · 2021-08-07T17:28:25.120

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)

score 0 · Answer 2 · answered Aug 07 '21 at 17:23

I had to remove some bits from your code as they were producing errors on my end. Working with what I had, you needed to add a Spacer() below the appropriate VStack.

Since your content was stored in a VStack embedded in another VStack, the outer VStack was essentially where the entire view lived. Putting a Spacer beneath this pushes it up to the top of the screen.

You can additionally add padding to the top of the VStack to move the view lower if you do not want it touching the top of the screen.

Code below:

    import SwiftUI

struct ContentView: 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(Color.blue)
                        .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(Color.blue)
                        .frame(maxWidth: .infinity, alignment: .leading)
                        .padding(.horizontal)
                        .padding(.bottom)
                }
                .background(Color.green)
                .cornerRadius(bottomLeft)
                .padding(.bottom, 10)
                
                Spacer() //Added a spacer here
            }
        }
    }
}

How to move this to the top?

2 Answers2