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.

Text

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!

Keep your code as is. Just put the HeaderView inside another Vstack lol [Here's a quick explainer if your interested](https://youtu.be/pv-vbUEzimk) — nicksarno, May 01 '21 at 05:48

score 2 · Accepted Answer · edited Apr 30 '21 at 20:59

2

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)
    }
}

edited Apr 30 '21 at 20:59

AlbertUI

1,409
9
26

answered Apr 30 '21 at 19:30

achu

329
3
7

Thank you! This seems to be what I need. For whatever reason I always seem to struggle struggle with ZStacks. – Alejo Apr 30 '21 at 21:20
@Alejo if the answer works, please accept and/or upvote it :) – aheze Apr 30 '21 at 23:23

score 1 · Answer 2 · answered Apr 30 '21 at 20:19

1

You can align to .top your ZStack:

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

answered Apr 30 '21 at 20:19

AlbertUI

1,409
9
26

1

Yeah, I did try that. However that would make all my views inside that ZStack to be aligned to the top, which I dont want to, all I want to be at the top is my header. Am I missing something here? – Alejo Apr 30 '21 at 21:21
In that case you have various options: A) Add a ‘.padding(.top, X)’ to your content; B) Use a ‘VStack(spacing: 0)’ instead of a ‘ZStack’ or C) add the Header via .overlay(Header(), alignment: .top), this way you will have only the header at the top – AlbertUI Apr 30 '21 at 21:48

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

2 Answers2