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

Do you have any `NavigationView` in the view hierarchy? This empty space looks like an empty navigation bar title. Try adding `.navigationBarTitleDisplayMode(.inline)` — pawello2222, Nov 12 '20 at 13:47
I have one in WelcomeView. But with this navigation view I am NavigationLink("", destination: SignupView(), isActive: $isRegister) plus I have a custom back button at the next two views (LoginView and SignUpView) I can not use them without that navigationView on WelcomeView — Mert Köksal, Nov 12 '20 at 13:54

score 2 · Answer 1 · answered Nov 12 '20 at 13:55

2

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

answered Nov 12 '20 at 13:55

pawello2222

46,897
22
145
209

Nope, still the same – Mert Köksal Nov 12 '20 at 13:58
I have just realized when I tap on another tab and then tap on the steps tab it shows the view as I wanted. It is just lower at the first show. @pawello2222 – Mert Köksal Nov 13 '20 at 22:53
@MertKöksal Your example is not reproducible - that's the best answer I can give you with your current code. – pawello2222 Nov 14 '20 at 09:35

VStack Lower Than Expected SwiftUI

1 Answers1