How to push a view to the top of a ZStack?

Question

So, basically im creating a HeaderView that consists of a ZStack that takes the entire screen space since it adds a pure black background and the entire header which sits on the black background (hence the need for a Zstack). Everything looks how I want it to, however Im having a hard time trying to put my HeaderView on the top of the ZStack to make space for all the other views I need to add below the header.

My current code is:

struct HomeView: View {
    
    var body: some View {
            ZStack() {
                Color.black.edgesIgnoringSafeArea(.all)
                HeaderView()
                
            }
    }
}



struct HeaderView: View {
    let name = "John"
    let lastName = "Gonzalez"
    let points = Int.random(in: 4000..<6000)
    var body: some View {
        HStack {
            VStack(alignment: .leading, spacing: 5) {
                Text(self.name)
                    .font(.title)
                    .fontWeight(.bold)
                    .foregroundColor(.white)
                Text(self.lastName)
                    .font(.title)
                    .fontWeight(.bold)
                    .foregroundColor(.white)
                
                HStack {
                    Text("Premium")
                        .frame(width: 90, height: 30)
                        .background(Color.green)
                        .cornerRadius(7)
                        .foregroundColor(.white)
                    
                    
                    Image(systemName: "bolt.fill")
                        .foregroundColor(.yellow)
                        .padding(.leading, 10)
                    Text(String(self.points))
                        .foregroundColor(.white)
                    Text("Points")
                        .foregroundColor(.white)
                        .font(.callout)
                        .fontWeight(.bold)
                }
                .padding(.top, 13)
            }
            .padding(.horizontal, 20)
            Spacer()
            
            Image("profilePicture")
                
                .resizable()
                .scaledToFit()
                .frame(width: 100, height:100)
                .clipShape(Capsule())
                .shadow(radius: 10)
                .padding(.trailing, 1)
        }
        
    }
    
}

The view currently looks like this, although I really want it to be on the top as every header is expected to be.

Any tips? I tried, for example, adding a Spacer() after calling HeaderView() so it pushed the Header to the top of the ZStack, but that literally did nothing. Any help is appreciated!

Answer 1

You can use VStack and use the .backgroundColor for it.

struct HomeView: View {
    var body: some View {
        VStack() {
            HeaderView()
            Spacer()
        }
        .background(Color.black)
        .edgesIgnoringSafeArea(.all)
    }
}

Answer 2

You can align to .top your ZStack:

struct HomeView: View {
    var body: some View {
        ZStack(alignment: .top) {
            YourContent()
            HeaderView()
        }
        .background(Color.black)
        .edgesIgnoringSafeArea(.all)
    }
}