SwiftUI中NavigationStack与NavigationSplitView搭配使用异常问题

我正在把项目从带侧边栏的NavigationView升级到iOS 16的NavigationSplitView+NavigationStack。正常切换侧边栏选项时，详情视图能正常更新；但从HomeView通过NavigationLink跳转后，再切换侧边栏选项，视图无法更新——选中的新视图被压在导航栈的根节点下面，必须点击返回按钮才能看到。

我试过按苹果迁移指南的方法，用onChange清空NavigationStack的path：

.onChange(of: selection) { _ in
    path.removeLast(path.count)
}

但问题依旧，完整代码如下：

import SwiftUI

enum Panel: Hashable {
    case home
    case notifications
    case Messages
    case profile
    case account
}

struct AppSidebarNavigation: View {
    
    @State private var path = NavigationPath()
    @State private var selection: Panel?

    var body: some View {
        NavigationSplitView {
            sidebar
            .navigationSplitViewColumnWidth(250)
            .onChange(of: selection) { _ in
                path.removeLast(path.count)
            }
        } detail: {
            // Main View
                switch selection ?? .home {

                case .home:
                    NavigationStack(path: $path) {
                      HomeView()
                    }
                    
                case .notifications:
                    NotificationsView()

                case .Messages:
                    NavigationStack(path: $path) {
                      MessagesView()
                    }

                case .profile:
                    NavigationStack(path: $path) {
                        ProfileView()
                    }

                    
                case .account:
                    NavigationStack(path: $path) {
                    AccountView()
                    }
                }

            
        }
        .onChange(of: selection) { _ in
            path.removeLast(path.count)
        }

    }
}

extension AppSidebarNavigation {
    
    var sidebar: some View {
            List( selection: $selection) {
                
                NavigationLink(value: Panel.home) {
                    Label("Home", systemImage: "house")
                }
                
                NavigationLink(value: Panel.notifications) {
                    Label("Notifications", systemImage:"bell")
                }
                
                NavigationLink(value: Panel.Messages) {
                    Label("Messages", systemImage: "arrow.right.arrow.left")
                }
                
                NavigationLink(value: Panel.profile) {
                    Label("Profile", systemImage: "wallet.pass")
                }
            }
    }
}

核心问题是每个Panel对应的NavigationStack都是独立创建的：切换selection时，新的NavigationStack复用同一个path，但旧NavigationStack已在path中压入层级；而且新创建的NavigationStack不会因path清空自动重置到根视图，结构设计本身就存在导航栈管理混乱的问题。

正确的做法是把NavigationStack提到详情列的最外层，作为统一的导航容器，切换侧边栏时仅替换NavigationStack内的根视图，同时重置path即可直接回到新根视图。

修改后的代码：

import SwiftUI

enum Panel: Hashable {
    case home
    case notifications
    case messages // 修正Swift命名规范：枚举成员首字母小写
    case profile
    case account
}

struct AppSidebarNavigation: View {
    
    @State private var path = NavigationPath()
    @State private var selection: Panel? = .home // 初始化默认选中项

    var body: some View {
        NavigationSplitView {
            sidebar
                .navigationSplitViewColumnWidth(250)
        } detail: {
            // 外层统一放置NavigationStack，管理全局导航栈
            NavigationStack(path: $path) {
                rootView(for: selection ?? .home)
            }
        }
        // 切换侧边栏时直接重置导航栈，比removeLast更彻底
        .onChange(of: selection) { _ in
            path = NavigationPath()
        }
    }
    
    // 提取根视图创建逻辑，避免重复代码
    private func rootView(for panel: Panel) -> some View {
        switch panel {
        case .home:
            HomeView()
        case .notifications:
            NotificationsView()
        case .messages:
            MessagesView()
        case .profile:
            ProfileView()
        case .account:
            AccountView()
        }
    }
}

extension AppSidebarNavigation {
    
    var sidebar: some View {
        List(selection: $selection) {
            NavigationLink(value: Panel.home) {
                Label("主页", systemImage: "house")
            }
            
            NavigationLink(value: Panel.notifications) {
                Label("通知", systemImage:"bell")
            }
            
            NavigationLink(value: Panel.messages) {
                Label("消息", systemImage: "arrow.right.arrow.left")
            }
            
            NavigationLink(value: Panel.profile) {
                Label("个人资料", systemImage: "wallet.pass")
            }
            
            NavigationLink(value: Panel.account) {
                Label("账户", systemImage: "person.circle")
            }
        }
    }
}

关键修改点 #

1. 将NavigationStack从每个Panel分支中移到详情列外层，统一管理导航栈
2. 用path = NavigationPath()直接重置导航栈，避免removeLast可能存在的残留问题
3. 提取rootView(for:)方法简化重复代码，提升可维护性
4. 修正枚举成员命名为Swift规范的小写开头（可选，但推荐遵循）
5. 初始化selection为.home，避免初始状态的可选值冗余处理

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