当导航栏按钮中嵌入到第三个视图的导航链接时，SwiftUI 导航无法在 3 个视图中按预期工作

问题描述

我是一名 Xcode/SwiftUI 开发新手，一直被以下与导航相关的问题所困扰。在以下最小的、可重现的示例中，我希望用户能够在到达 ThirdView 后逐个视图向后导航应用程序，如下所示：ThirdView -> SecondView -> FirstView（或 ContentView，在下面的示例中）。

当 SecondView 中到达 ThirdView 的 NavigationLink 位于 SecondView 的主体中时，一切都按预期进行。 （这是我在下面的示例中注释掉的 SecondView 代码。）但是，如果我将相同的 NavigationLink 向上移动到导航栏（如图所示），则单击 ThirdView 中的“返回到第二个视图”栏按钮不会执行任何操作.视图不会改变。有没有办法通过条形按钮中的导航链接从 SecondView -> ThirdView 导航，但仍然能够从 ThirdView -> SecondView 向后前进？

我在网上阅读了一些此类问题的问答，这些问答表明此问题是 Xcode Simulator 中的一个小故障，但是当我在我的设备上加载应用程序时，我遇到了同样的问题。

struct ContentView: View {
    @State private var activeLink: Bool = false
    var body: some View {
        NavigationView {
            vstack {
                Spacer()
                NavigationLink("Show Second Screen",destination: SecondView(active: $activeLink),isActive: $activeLink)
                Spacer()
            }.padding()
            .navigationBarTitle("First view")
        }
    }
}

struct SecondView: View {
    @Binding var active: Bool
    @State private var thirdViewLink: Bool = false
    
    var body: some View {
        vstack {
        Spacer()
    // This works as expected but is not ideal for my purposes
     /* NavigationLink("Show Third View",destination: ThirdView(thirdViewActive: $thirdViewLink),isActive: $thirdViewLink) */
        Spacer()
        }.padding()
        .navigationBarTitle("Second View")
        .navigationBarBackButtonHidden(true)
        .navigationBarItems(leading: Button("Back to 1st View") {
            self.active = false
        },trailing: NavigationLink("Show Third View",isActive: $thirdViewLink))
    }
}

struct ThirdView: View {
    @Binding var thirdViewActive: Bool
    var body: some View {
        vstack(spacing: 15) {
            Text("Third View")
            Spacer()
        }.padding()
        .navigationBarItems(leading: Button("Back to 2nd View") {
            self.thirdViewActive = false
        })
    }
}

解决方法

问题是您的 NavigationLink 之外有一个 NavigationView。

.navigationBarItems(leading: Button("Back to 1st View") {
    self.active = false
},trailing: NavigationLink( /// this is not inside your NavigationView!
    "Show Third View",destination: ThirdView(thirdViewActive: $thirdViewLink),isActive: $thirdViewLink
)

这行不通，你会遇到奇怪的问题。 NavigationLink 总是 需要在 NavigationView 内。您应该遵循您的方法，“这按预期工作，但不适合我的目的”，只需传入 EmptyView 以隐藏它。

struct SecondView: View {
    @Binding var active: Bool
    @State private var thirdViewLink: Bool = false
    
    var body: some View {
        VStack {
            Spacer()
            // This works as expected but is not ideal for my purposes
            NavigationLink(destination: ThirdView(thirdViewActive: $thirdViewLink),isActive: $thirdViewLink) {
                EmptyView()
            }
            Spacer()
        }.padding()
        .navigationBarTitle("Second View")
        .navigationBarBackButtonHidden(true)
        .navigationBarItems(leading: Button("Back to 1st View") {
            self.active = false
        },trailing:
            Button("Show Third View") {
                self.thirdViewLink = true
            }
        )
    }
}