swiftui - VStack が予想よりも低い SwiftUI

Question

プレビューでは、シミュレーターまたは電話でアプリを実行すると VStack が有望に見えますが、予想よりも低いように見えます。2 つの画像を比較すると、ビューの先頭に大きなギャップがあることがわかります。問題を理解するのに役立つレイヤーの画像も追加しました。私は明らかに理解できません。

プレビュー中

シミュレーターで

レイヤー

コード

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

ウェルカム ページに 1 つの NavigationView があります。その NavigationView を使用して、サインインまたはサインアップボタンをクリックできるようにしています。

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