swiftui - VStack 低于预期 SwiftUI

Question

尽管在预览版中 VStack 看起来很有希望，但当我在模拟器或手机上运行该应用程序时，它似乎低于预期。通过比较两个图像，您可以看到在 View 的前部有很大的差距。我还添加了层的图像以帮助您理解问题。我显然无法理解。

预览中

在模拟器中

图层

代码

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

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

Answer 1

在 automatic 模式下，空白区域看起来像一个空的导航栏标题(在本例中是 large)。

尝试在此 View 中设置 .navigationBarTitleDisplayMode(.inline)(这不会修改父 View ):

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