VStack Lower Than Expected SwiftUI

Question

Even though in preview VStack looks promising when I run the app on the simulator or on the phone it appears lower than expected. You can see there is a big gap at the leading of the view from comparing the two images. I have also added layer's image to help you understand the problem. Which I can not understand obviously.

In preview

In the simulator

Layers

Code

    var body: some View {
//        NavigationView {
        ZStack(alignment: .leading) {
                Image("stepsTabBG")
                    .resizable()
                    .ignoresSafeArea(.all)
                VStack {
                    HStack {
                        ScrollView(.horizontal) {
                            HStack(spacing: 30) {
                                ForEach(steps, id: \.id) { day in
                                    Text("\(Calendar.current.dateComponents([.day], from: day.date).day!)")
                                        .onTapGesture {
                                            selectedDay = day
                                        }
                                }
                            }
                        }
                        .frame(width: UIScreen.main.bounds.width / 2)
                        .padding(10)
                        Spacer()
                    }
                    CircularProgress(steps: selectedDay.count)
                    
//                    Text(selectedDay.date, style: .date)
//                        .font(Font.custom("SFCompactDisplay", size: 14))
//                        .foregroundColor(Color(#colorLiteral(red: 0.4392156863, green: 0.4392156863, blue: 0.4392156863, alpha: 1)))
//                        .padding()
                    
                    HStack {
                        Text("Min 500")
                            .padding()
                            .padding()
                        Text("Max 15000")
                    }
                    .font(Font.custom("SFCompactDisplay", size: 14))
                    .foregroundColor(Color(#colorLiteral(red: 0.4392156863, green: 0.4392156863, blue: 0.4392156863, alpha: 1)))
                    Text("BLA BLA BLA")
                        .font(Font.custom("SFCompactDisplay-Bold", size: 34))
                        .foregroundColor(Color(#colorLiteral(red: 0.4392156863, green: 0.4392156863, blue: 0.4392156863, alpha: 1)))
                        .padding()
                    Text("Bla bla bla")
                        .font(Font.custom("SFCompactDisplay", size: 14))
                        .foregroundColor(Color(#colorLiteral(red: 0.4392156863, green: 0.4392156863, blue: 0.4392156863, alpha: 1)))
                    Spacer()
                }
                .frame(maxWidth: .infinity, alignment: .topLeading)
            }
        
//        }

        .onAppear() {
            if let healthStore = healthStore {
                healthStore.requestAuthorization { (success) in
                    if success {
                        healthStore.calculateSteps { (statisticsCollection) in
                            if let statisticsCollection = statisticsCollection {
                                updateUIFromStatistics(statisticsCollection)
                            }
                        }
                    }
                }
            }
        }
    }
}

I have one NavigationView in Welcome Page. I am using that NavigationView to be able to click sign in or sign up buttons.

 struct WelcomeView: View {
    @State var isLogin : Bool = false
    @State var isRegister : Bool = false
    var body: some View {
        NavigationView {
            VStack {
            ZStack(alignment: .top) {
                Image("Welcomebg")
                    .resizable()
//                    .aspectRatio(contentMode: .fit)
                    .edgesIgnoringSafeArea(.all)
                Image("WelcomeImage")
                    .padding(.vertical, 30)
                HStack {
                    Text("Walker")
                    Image("logo")
                    Text("App")
                }
                .font(Font.custom("SFCompactDisplay-Bold", size: 16))
                .foregroundColor(.black)
            }
                Spacer()
                Text("Title")
                    .font(Font.custom("SFCompactDisplay-Bold", size: 30))
                  
                Text("Description")
                    .font(Font.custom("SFCompactDisplay", size: 16))
                    .foregroundColor(.gray)
                    .padding(.vertical, 20)
                Spacer()
                NavigationLink("", destination: LoginView(), isActive: $isLogin)
                Button(action: {
                    self.isLogin.toggle()
                }) {
                    Text("GIRIS YAP")
                        .foregroundColor(.white)
                        .padding(.vertical,25)
                        .padding(.horizontal,UIScreen.main.bounds.width / 3)
                        .font(Font.custom("SFCompactDisplay-Bold", size: 14))
                }
                .background(Color("ColorOnboarding"))
                .clipShape(Capsule())
                .padding(.top,20)
                HStack {
                    Text("HESABINIZ YOK MU?")
                        .foregroundColor(.gray)
                    NavigationLink("", destination: SignupView(), isActive: $isRegister)
                    Button(action: {
                        self.isRegister.toggle()
                    }) {
                        Text("UYE OL")
                            .foregroundColor(Color("ColorOnboarding"))
                            .padding(.vertical,25)
                    }
                }
                .font(Font.custom("SFCompactDisplay", size: 14))
            }
            .navigationBarHidden(true)
               
        }
    }
}

Answer 1

The empty space looks like an empty navigation bar title in automatic mode (which in this case is large).

Try setting .navigationBarTitleDisplayMode(.inline) in this view (this will not modify the parent view):

var body: some View {
    ZStack(alignment: .leading) {
        // ...
    }
    .navigationBarTitleDisplayMode(.inline)
}