有在 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)")
                }
            }
        }
    }
}

我希望能够看到横向和纵向屏幕的尺寸。

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

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

如果您想强制其压缩，请执行以下操作：

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

Answer 2

将此修改器添加到 NavigationView 可以禁用主视图 - 详细视图。

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

Answer 3

解决这个问题的另一种方法是强制NavigationView采用堆叠样式。

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

或较新的：

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

Answer 4

这发生在我的 iPhone 11 上，当我将其切换为横向模式时，它在#preview、模拟器和 iPhone 上将

NavigationView

替换为

NavigationSplitView

。这很有趣，因为在横向模式下的

iPhone Xs

或

iPhone 12

上，这种情况不会发生在我身上。

在 iOS 上，尤其是在较大的型号或具有更多可用空间的屏幕（例如横向模式下的

iPhone 11

）上，SwiftUI 可能会切换到

NavigationSplitView

布局以更好地利用空间。

我解决这个问题的第一个方法是使用：

NavigationView {
    AnyView()
}.navigationViewStyle(.stack)

阅读有关该问题的更多信息后，我在Apple文档中阅读了此内容https://developer.apple.com/documentation/swiftui/navigationviewstyle：

协议 NavigationViewStyle 已弃用

用 NavigationStack 或 NavigationSplitView 替换样式化的 NavigationView。有关更多信息，请参阅迁移到新的导航类型。

所以我决定将 NavigationView 更改为 NavigationStack，如文档中所述：

NavigationStack {
    AnyView()
}