在 iPhone XR 模拟器上有横向使用 SwifUI NavigationView 的经验吗?

Any experience with SwifUI NavigationView in landscape on iPhone XR simulator?

我在 iPhone XR 模拟器上尝试 运行 我的横向应用程序,但出现黑屏。

下面的代码是我的测试。它在 iPhone 8 模拟器上正常工作,如果我删除 NavigationView,它在 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)")
                }
            }
        }
    }
}

我预计我会看到横向和纵向的屏幕尺寸。

有人对这种组合有经验吗?

没有错。只是当一个大iPhone横屏时,它的水平尺寸class被设置为.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)
    }
}

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

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

解决此问题的另一种方法是强制 NavigationView 堆叠样式。

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

或较新的:

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