title: VStack Lower Than Expected SwiftUI
body: <p>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.</p>
  <p>In preview</p>
  <p><a href="https://i.stack.imgur.com/OMSyQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OMSyQ.png" alt="enter image description here" /></a></p>
  <p>In the simulator</p>
  <p><a href="https://i.stack.imgur.com/qCLir.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qCLir.png" alt="enter image description here" /></a></p>
  <p>Layers</p>
  <p><a href="https://i.stack.imgur.com/dDgj6.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dDgj6.jpg" alt="enter image description here" /></a></p>
  <p>Code</p>
  <pre><code>    var body: some View {
  //        NavigationView {
          ZStack(alignment: .leading) {
                  Image(&quot;stepsTabBG&quot;)
                      .resizable()
                      .ignoresSafeArea(.all)
                  VStack {
                      HStack {
                          ScrollView(.horizontal) {
                              HStack(spacing: 30) {
                                  ForEach(steps, id: \.id) { day in
                                      Text(&quot;\(Calendar.current.dateComponents([.day], from: day.date).day!)&quot;)
                                          .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(&quot;SFCompactDisplay&quot;, size: 14))
  //                        .foregroundColor(Color(#colorLiteral(red: 0.4392156863, green: 0.4392156863, blue: 0.4392156863, alpha: 1)))
  //                        .padding()
                      
                      HStack {
                          Text(&quot;Min 500&quot;)
                              .padding()
                              .padding()
                          Text(&quot;Max 15000&quot;)
                      }
                      .font(Font.custom(&quot;SFCompactDisplay&quot;, size: 14))
                      .foregroundColor(Color(#colorLiteral(red: 0.4392156863, green: 0.4392156863, blue: 0.4392156863, alpha: 1)))
                      Text(&quot;BLA BLA BLA&quot;)
                          .font(Font.custom(&quot;SFCompactDisplay-Bold&quot;, size: 34))
                          .foregroundColor(Color(#colorLiteral(red: 0.4392156863, green: 0.4392156863, blue: 0.4392156863, alpha: 1)))
                          .padding()
                      Text(&quot;Bla bla bla&quot;)
                          .font(Font.custom(&quot;SFCompactDisplay&quot;, 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)
                              }
                          }
                      }
                  }
              }
          }
      }
  }
  </code></pre>
  <p>I have one NavigationView in Welcome Page. I am using that NavigationView to be able to click sign in or sign up buttons.</p>
  <pre><code> struct WelcomeView: View {
      @State var isLogin : Bool = false
      @State var isRegister : Bool = false
      var body: some View {
          NavigationView {
              VStack {
              ZStack(alignment: .top) {
                  Image(&quot;Welcomebg&quot;)
                      .resizable()
  //                    .aspectRatio(contentMode: .fit)
                      .edgesIgnoringSafeArea(.all)
                  Image(&quot;WelcomeImage&quot;)
                      .padding(.vertical, 30)
                  HStack {
                      Text(&quot;Walker&quot;)
                      Image(&quot;logo&quot;)
                      Text(&quot;App&quot;)
                  }
                  .font(Font.custom(&quot;SFCompactDisplay-Bold&quot;, size: 16))
                  .foregroundColor(.black)
              }
                  Spacer()
                  Text(&quot;Title&quot;)
                      .font(Font.custom(&quot;SFCompactDisplay-Bold&quot;, size: 30))
                    
                  Text(&quot;Description&quot;)
                      .font(Font.custom(&quot;SFCompactDisplay&quot;, size: 16))
                      .foregroundColor(.gray)
                      .padding(.vertical, 20)
                  Spacer()
                  NavigationLink(&quot;&quot;, destination: LoginView(), isActive: $isLogin)
                  Button(action: {
                      self.isLogin.toggle()
                  }) {
                      Text(&quot;GIRIS YAP&quot;)
                          .foregroundColor(.white)
                          .padding(.vertical,25)
                          .padding(.horizontal,UIScreen.main.bounds.width / 3)
                          .font(Font.custom(&quot;SFCompactDisplay-Bold&quot;, size: 14))
                  }
                  .background(Color(&quot;ColorOnboarding&quot;))
                  .clipShape(Capsule())
                  .padding(.top,20)
                  HStack {
                      Text(&quot;HESABINIZ YOK MU?&quot;)
                          .foregroundColor(.gray)
                      NavigationLink(&quot;&quot;, destination: SignupView(), isActive: $isRegister)
                      Button(action: {
                          self.isRegister.toggle()
                      }) {
                          Text(&quot;UYE OL&quot;)
                              .foregroundColor(Color(&quot;ColorOnboarding&quot;))
                              .padding(.vertical,25)
                      }
                  }
                  .font(Font.custom(&quot;SFCompactDisplay&quot;, size: 14))
              }
              .navigationBarHidden(true)
                 
          }
      }
  }
  </code></pre>