SwiftUI中NavigationView迁移至NavigationStack的导航行为异常问题

问题根源 #

原来的NavigationView在侧边栏点击新选项时，会自动退回右侧当前打开的子视图，直接切换到新选项的根视图；但NavigationSplitView默认不会自动重置右侧的导航栈，必须手动点击返回回到根视图才能切换。

解决办法 #

通过绑定NavigationStack的导航路径（NavigationPath），在侧边栏切换选项时清空这个路径，强制右侧回到新选中视图的根页面，还原原NavigationView的行为。

示例代码 #

import SwiftUI

struct ContentView: View {
    // 控制右侧导航栈的路径
    @State private var navPath = NavigationPath()
    // 当前选中的侧边栏项
    @State private var selectedItem: SidebarOption? = .home
    
    enum SidebarOption: String, CaseIterable {
        case home = "首页"
        case profile = "个人中心"
        case settings = "设置"
    }
    
    var body: some View {
        NavigationSplitView {
            List(SidebarOption.allCases, id: \.self, selection: $selectedItem) { item in
                Text(item.rawValue)
                    .onTapGesture {
                        // 切换选项时清空导航栈，直接切到新视图的根页面
                        navPath.removeLast(navPath.count)
                        selectedItem = item
                    }
            }
            .navigationTitle("侧边栏")
        } detail: {
            NavigationStack(path: $navPath) {
                switch selectedItem {
                case .home:
                    HomeView(navPath: $navPath)
                case .profile:
                    ProfileView(navPath: $navPath)
                case .settings:
                    SettingsView()
                case nil:
                    Text("请选择一个选项")
                }
            }
        }
    }
}

// 子视图示例
struct HomeView: View {
    @Binding var navPath: NavigationPath
    
    var body: some View {
        VStack {
            Text("首页")
                .font(.largeTitle)
            Button("查看详情") {
                navPath.append("HomeDetail")
            }
        }
        .navigationTitle("首页")
    }
}

struct ProfileView: View {
    @Binding var navPath: NavigationPath
    
    var body: some View {
        VStack {
            Text("个人中心")
                .font(.largeTitle)
            Button("我的收藏") {
                navPath.append("ProfileFavorites")
            }
        }
        .navigationTitle("个人中心")
    }
}

struct SettingsView: View {
    var body: some View {
        Text("设置")
            .font(.largeTitle)
            .navigationTitle("设置")
    }
}

关键逻辑说明 #

• 用NavigationPath绑定右侧NavigationStack的路径，这个对象直接控制导航栈的层级。
• 在侧边栏选项的点击事件里，调用navPath.removeLast(navPath.count)清空整个导航栈，这样切换选项时右侧会直接显示新视图的根页面，无需手动返回。
• 如果只需要退回到当前视图的上一级（而非完全清空），可以把参数改成1，比如navPath.removeLast(1)，根据需求调整即可。

额外提示 #

• 如果侧边栏使用NavigationLink而非onTapGesture，可以在NavigationLink的onTap回调中执行清空路径的操作。
• 不管是iPad分屏还是紧凑模式（如iPhone），这个逻辑都能适配，保证导航行为一致。

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