使用 SwiftUI 将设备旋转到横向时出现导航栏

Posted 2023-02-24

【中文标题】使用 SwiftUI 将设备旋转到横向时出现导航栏

【英文标题】：Navigation Bar appearing when device is rotated to landscape using SwiftUI

【发布时间】：2021-03-24 19:57:21

【问题描述】：

屏幕工作正常（无导航栏）：

iPhone 纵向模式 iPad 纵向模式 iPad 横向模式

它只在 iPhone 横向模式下显示导航栏。

任何人都可以建议我做错了什么或者即使在 iPhone 横向模式下也可以做些什么来消失导航栏？ 提前致谢。

在此处附上纵向和横向模式的屏幕截图。

Navigation bar appearing in landscape mode

Working fine (no navigation bar) in portrait mode

struct LoginView: View 

@ObservedObject var vm = LoginVM()

var body: some View 
    NavigationView 
        VStack 
                TextField("Username", text: $vm.username)
                    .padding()
                    .overlay(RoundedRectangle(cornerRadius: 10)
                    .stroke(Color.blue, lineWidth: 0.5))
                    .padding([.top, .bottom])
                
                SecureField("Password / SMS Code", text: $vm.password)
                    .padding()
                    .overlay(RoundedRectangle(cornerRadius: 10)
                    .stroke(Color.blue, lineWidth: 0.5))
                    .padding(.bottom, 20)
                
                HStack 
                    Spacer()
                    NavigationLink(
                        destination: ForgotPassView(),
                        label: 
                            Text("Forgot Password ?")
                    ).padding(.bottom, 40)
            
        .padding()
    
    .navigationViewStyle(StackNavigationViewStyle())

【参考方案1】：

将.navigationBarHidden(true)添加到NavigationView的子视图中：

var body: some View 
        NavigationView 
            VStack 
                TextField("Username", text: $vm.username)
                    .padding()
                    .overlay(RoundedRectangle(cornerRadius: 10)
                                .stroke(Color.blue, lineWidth: 0.5))
                    .padding([.top, .bottom])
                
                SecureField("Password / SMS Code", text: $vm.password)
                    .padding()
                    .overlay(RoundedRectangle(cornerRadius: 10)
                                .stroke(Color.blue, lineWidth: 0.5))
                    .padding(.bottom, 20)
                
                HStack 
                    Spacer()
                    NavigationLink(
                        destination: ForgotPassView(),
                        label: 
                            Text("Forgot Password ?")
                        ).padding(.bottom, 40)
                
            
            .padding()
            .navigationBarHidden(true) //<-- here
        
        .navigationViewStyle(StackNavigationViewStyle())
    

【讨论】：

添加 .navigationBarHidden(true) 在此特定屏幕上工作正常，但是当我通过点击忘记密码转到 ForgotPassView() 时？ （如上面的代码中所述），然后 ForgotPassView() 的导航栏以白色显示： - iPhone 纵向模式 - iPad 纵向模式 - iPad 横向模式和本机颜色，即 iPhone 横向模式的灰色（半透明）。如何在 iPhone 和 iPad 中以相同的方式处理这两种模式？

虽然我可以进行实验，但我不确定。听起来像是一个单独的问题。这个问题是如何隐藏我在这个答案中演示的导航栏，对吗？或者，也许您的问题是如何在后续视图中隐藏导航栏——您将不得不再次使用 .navigationBarHidden

我认为它是相互关联的，这就是为什么即使我需要单独隐藏导航栏（横向），当它在纵向模式下不可见时。因此，为了不在横向显示而使用 .navigationBarHidden(true) 隐藏导航栏看起来不是一个完美的解决方案。可能是我的问题是 SwiftUI 中的一个错误，并且以这种方式隐藏导航栏看起来不是一个好的解决方法。

老实说，如果您不想显示导航栏，这听起来有点像您不想使用 NavigationView。

【参考方案2】：

谢谢，只是：

.navigationViewStyle(StackNavigationViewStyle())

为我工作！