在iPhone XR模拟器上使用SwifUI NavigationView横屏的经验？

Question

我尝试在 iPhone XR 模拟器上以横向模式运行我的应用程序，但屏幕是空白的。

下面的代码是我的测试。如果我删除 NavigationView，它可以在 iPhone 8 模拟器上正确工作，但在 iPhone XR 模拟器上不起作用。

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            GeometryReader { gp in
                VStack(alignment: HorizontalAlignment.center) {
                    Text("Width: \(gp.size.width)")
                    Text("Height: \(gp.size.height)")
                }
            }
        }
    }
}

我希望能够在横屏和竖屏两种状态下查看屏幕的大小。

有人有这种组合的经验吗？

- Michael Salmon

Answer 1

没有任何问题。只是当大号的iPhone处于横向时，它的水平尺寸类别设置为.regular，而不是.compact。可以将其视为iPad。

您可以通过从屏幕左侧滑动进行验证：

如果更改您的代码以在未选择任何内容时添加默认视图，则会获得另一种外观：

struct ContentView: View {
    var body: some View {
        NavigationView {
            GeometryReader { gp in
                VStack(alignment: HorizontalAlignment.center) {
                    Text("Width: \(gp.size.width)")
                    Text("Height: \(gp.size.height)")
                    NavigationLink(destination: Text("Something got selected")) { Text("Select something") }
                }

            }

            Text("No Selection")
        }
    }
}

如果您想强制使用.compact，可以执行以下操作：

struct ContentView: View {
    var body: some View {
        NavigationView {
            GeometryReader { gp in
                VStack(alignment: HorizontalAlignment.center) {
                    Text("Width: \(gp.size.width)")
                    Text("Height: \(gp.size.height)")
                    NavigationLink(destination: Text("Something got selected")) { Text("Select something") }
                }

            }

            Text("No Selection")
        }.environment(\.horizontalSizeClass, .compact)
    }
}

- kontiki

---

好的，我接受这是正在发生的事情，但为什么只在NavigationView中发生呢？ - Michael Salmon

这就是它们的工作方式。UINavigationController也会发生同样的事情。 - kontiki

Answer 2

将此修饰符添加到NavigationView中，可以禁用主细节视图。

NavigationView {
  // Code
}
.environment(\.horizontalSizeClass, .compact) 

- cartes_dev

---

谢谢，但那正是@kontiki写的。 - Michael Salmon

是的，我只想简要回答一下。我刚开始使用Stack Overflow，对于重复问题表示抱歉。 - cartes_dev

Answer 3

另一种解决方法是强制NavigationView使用堆栈样式。

NavigationView {
    Text("Hello World")
    }.navigationViewStyle(StackNavigationViewStyle())

或者使用更新的版本：

NavigationView {
    Text("Hello World")
    }.navigationViewStyle(.stack)

- Siegfoult