SwiftUI 导航视图旋转的错误？

Question

在测试我的应用程序以确保它在屏幕旋转下正常运行时，我发现导航链接在特定旋转序列后不起作用。

以下是 MWE：

struct ContentView: View {
    var body: some View {
        NavigationView {
            NavigationLink("link") {
                Text("hi")
            }
        }
    }
    // rotate ->  back -> link -> rotate -> back -> link
}

在 iPhone 13 Pro Max (iOS 15.2 (19C51)) 模拟器上，以下导致错误：

1. 在纵向模式下运行应用程序
2. 将应用旋转到横向模式
3. 触摸back按钮（在导航栏中）
4. 触摸导航链接link
5. 将应用旋转到纵向模式
6. 触摸back按钮
7. 现在触摸导航链接link不起作用！

此外，调试控制台打印：

Unbalanced calls to begin/end appearance transitions for <_TtGC7SwiftUI19UIHostingControllerGVS_15ModifiedContentGS1_VVS_22_VariadicView_Children7ElementVS_24NavigationColumnModifier_GVS_18StyleContextWriterVS_19SidebarStyleContext___: 0x152f24860>.

这是 SwiftUI 中的错误吗？ 有没有办法解决这个问题？

我在 macOS Monterey (12.2 (21D49)) + Xcode 13.2.1 (13C100) 上。

Answer 1

将 ColumnNavigationViewStyle 更改为 StackNavigationViewStyle 将解决您的问题，您提到的序列很可能是一个错误，希望苹果会尽快解决它。

struct ContentView: View {
    var body: some View {
        NavigationView {
            NavigationLink("link") {
                Text("hi")
            }
        }
        .navigationViewStyle(.stack) //Style
    }
}

Answer 2

无需放弃 iPadOS 中的双列布局，我使用以下条件视图构建器根据水平尺寸 class 使用不同的导航样式。

（虽然条件视图构建器通常不能很好地处理动画，但在这里使用它似乎还可以。）

extension View {
    @ViewBuilder func `if`<TrueContent: View>(
        _ condition: Bool,
        then trueContent: (Self) -> TrueContent
    ) -> some View {
        if condition {
            trueContent(self)
        } else {
            self
        }
    }
}

struct ContentView: View {
    var body: some View {
        NavigationView {
            NavigationLink("link") {
                Text("hi")
            }
        }
        .if(UIDevice.current.userInterfaceIdiom == .phone) {
            $0.navigationViewStyle(.stack)
        }
    }
}

PS 当场景在每次旋转后适当调整大小时，该问题也可以在 iPadOS 中重现，但我认为在无意重现的情况下这种情况不太可能发生。

Answer 3

最大值使用横向列，而您缺少第二列视图。 尝试这个

struct ContentView: View {
var body: some View {
    NavigationView {
        NavigationLink("link") {
            Text("hi")
        }
         Text("Select a link")
    }
}
}