如何在 NavigationStack 之外使用 NavigationLink？

Question

我在我的NavigationStack上放置了一個安全區域插入視圖，以便充當所有推送視圖的底部欄。 但是，在安全區域插圖視圖中，有一個按鈕，我想將視圖推送到堆棧上。 NavigationLink是灰色的，因為它在NavigationStack之外。

這是我的代碼的樣子：

NavigationStack {
    VStack {
        Image(systemName: "globe")
        Text("Hello, world!")
    }
    .toolbar {
        ToolbarItem(placement: .navigationBarLeading) {
            NavigationLink("Button 1") {
                Text("Screen 1")
            }
        }
        ToolbarItem(placement: .navigationBarTrailing) {
            NavigationLink("Button 2") {
                Text("Screen 2")
            }
        }
    }
}
.safeAreaInset(edge: .bottom, spacing: 0) {
    HStack {
        NavigationLink("Button 1") {
            Text("Screen 1")
        }
        .frame(minWidth: 0, maxWidth: .infinity)
        NavigationLink("Button 2") {
            Text("Screen 2")
        }
        .frame(minWidth: 0, maxWidth: .infinity)
    }
    .padding()
    .background(.regularMaterial)
}

它的行為方式是底部視圖確實粘在所有推送的視圖上，但是那里的按鈕沒有做任何事情（盡管頂部導航欄中的按鈕可以正常工作）：

由於我不想在每個子視圖上放置此底部覆蓋代碼，因此我怎樣才能讓底部安全區域中的按鈕插入以導航到不同的屏幕，同時仍將其保持在NavigationStack級別？

Answer 1

您可以將編程導航與NavigationStack一起使用：

state var navigationPath保存活動路徑，您可以使用NavigationLink(value:)或直接設置它（如在安全區域按鈕中）來更改它。

struct ContentView: View {
    
    // holds the active navigation path
    @State private var navigationPath: [Int] = []
    
    var body: some View {
        
        NavigationStack(path: $navigationPath ) {
            VStack {
                Image(systemName: "globe")
                Text("Hello, world!")
            }
            // defines destinations of path
            .navigationDestination(for: Int.self, destination: { value in
                switch value {
                case 1: Text("Screen 1")
                case 2: Text("Screen 2")
                default: Text("unknown view")
                }
            })
            
            .toolbar {
                ToolbarItem(placement: .navigationBarLeading) {
                    NavigationLink("Button 1", value: 1)
                }
                ToolbarItem(placement: .navigationBarTrailing) {
                    NavigationLink("Button 2", value: 2)
                }
            }
        }
        
        .safeAreaInset(edge: .bottom, spacing: 0) {
            HStack {
                Button("Button 1") {
                    navigationPath = [1]
                    // or if you want to extend the path:
                    // navigationPath.append(1)
                }
                .frame(maxWidth: .infinity)
                Button("Button 2") {
                    navigationPath = [2]
                    // or if you want to extend the path:
                    // navigationPath.append(2)
               }
                .frame(maxWidth: .infinity)
            }
            .padding()
            .background(.regularMaterial)
        }
    }
}