VStack低于预期的SwiftUI

问题描述

即使在预览版中，当我在模拟器或手机上运行该应用程序时，vstack看起来也很有希望，但它看起来比预期的要低。通过比较两个图像，您可以看到视图的开头有很大的差距。我还添加了图层的图像以帮助您理解问题。我显然不明白。

预览中

在模拟器中

层

代码

    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,alpha: 1)))
                    Text("BLA BLA BLA")
                        .font(Font.custom("SFCompactdisplay-Bold",size: 34))
                        .foregroundColor(Color(#colorLiteral(red: 0.4392156863,alpha: 1)))
                        .padding()
                    Text("Bla bla bla")
                        .font(Font.custom("SFCompactdisplay",size: 14))
                        .foregroundColor(Color(#colorLiteral(red: 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)
                            }
                        }
                    }
                }
            }
        }
    }
}

我在欢迎页面中有一个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)
               
        }
    }
}

解决方法

空白区域在automatic模式下（在本例中为large）下看起来像是空白的导航栏标题。

尝试在此视图中设置.navigationBarTitleDisplayMode(.inline)（这不会修改父视图）：

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