SwiftUI中使用NavigationStack如何取消中间视图直接跳转详情页？

当使用SwiftUI的NavigationStack实现导航时，默认需要点击带文本/标签的NavigationLink视图才能进入详情页。要跳过这个点击环节，直接在页面加载时跳转至详情视图，可通过绑定NavigationStack的导航路径实现，以下针对两种常见NavigationLink写法分别给出解决方案：

方案1：适配带value和navigationDestination的写法 #

原代码：

import SwiftUI

struct ContentView: View {
let i: Int = 1

    var body: some View {
        NavigationStack {
            NavigationLink("Select \(i)", value: i)
                .navigationDestination(for: Int.self) { selection in
                    DetailView(number: i)
                }
        }
    }
}

修改后代码：

import SwiftUI

struct ContentView: View {
    let i: Int = 1
    // 绑定NavigationStack的导航路径
    @State private var path = NavigationPath()

    var body: some View {
        NavigationStack(path: $path) {
            // 移除原点击触发的NavigationLink
            Text("主页面") // 替换为你的主页面内容
                .navigationDestination(for: Int.self) { selection in
                    DetailView(number: selection)
                }
                .onAppear {
                    // 页面加载时直接将目标标识推入路径，触发导航
                    path.append(i)
                }
        }
    }
}

struct DetailView: View {
    var number: Int
    var body: some View {
        Text("详情页：\(number)")
    }
}

方案2：适配闭包形式的NavigationLink写法 #

原代码（Paul Hudson示例）：

struct DetailView: View {
    var body: some View {
        Text("This is the detail view")
    }
}

struct ContentView: View {
    var body: some View {
        NavigationStack {
            VStack {
                NavigationLink {
                    DetailView()
                } label: {
                    Label("Show Detail View", systemImage: "globe")
                }
            }
            .navigationTitle("Navigation")
        }
    }
}

修改后代码：

struct DetailView: View {
    var body: some View {
        Text("这是详情视图")
    }
}

struct ContentView: View {
    // 绑定NavigationStack的导航路径
    @State private var path = NavigationPath()

    var body: some View {
        NavigationStack(path: $path) {
            VStack {
                Text("主页面")
            }
            .navigationTitle("导航")
            .navigationDestination(for: String.self) { _ in
                DetailView()
            }
            .onAppear {
                // 页面加载时推入自定义标识，触发导航
                path.append("detail")
            }
        }
    }
}

核心逻辑说明 #

1. 通过@State private var path = NavigationPath()创建导航路径的绑定对象，传入NavigationStack(path: $path)
2. 在页面onAppear回调中，将目标导航的标识值（Int、String或自定义类型均可）添加到path中，NavigationStack会自动匹配对应的navigationDestination，直接跳转至详情视图
3. 移除原有的NavigationLink视图，无需点击触发导航

内容的提问来源于stack exchange，提问作者Dan Selig