NavigationSplitView侧边栏嵌套Section后NavigationLink失效问题解决

核心问题原因 #

• 原代码中每个Section内部都嵌套了独立的List，所有List绑定同一个@State var selection，多个List共享同一选择状态会引发SwiftUI状态管理冲突，导致导航链接失效。
• 额外错误：Navigation2枚举的allNavigationCases属性引用了不存在的Navigation枚举，应改为Navigation2.allCases。

修正后的代码 #

import SwiftUI

enum Navigation2: String, Hashable, CaseIterable {
    case bike = "Fiets"
    case car = "Bak Met Wielen"
    case bus = "Komt zo"
    
    // 修正枚举引用错误
    static let allNavigationCases = Navigation2.allCases.map { $0.rawValue }
}

struct MainNavigationSplitView: View {
    @State private var selection: String? 
    
    var body: some View {
        NavigationSplitView {
            // 侧边栏：将所有内容放在单个List中，内部嵌套Section
            List(selection: $selection) {
                Text("Nav").bold()
                
                ForEach(Navigation2.allNavigationCases, id: \.self) { section in
                    Section(header: Text("Navigable rows \(section)")) {
                        NavigationLink(destination: View1(), tag: "View1", selection: $selection) {
                            Label("View 1", systemImage: "1.circle")
                        }
                        NavigationLink(destination: View2(), tag: "View2", selection: $selection) {
                            Label("View 2", systemImage: "2.circle")
                        }
                        NavigationLink(destination: View3(), tag: "View3", selection: $selection) {
                            Label("View 3", systemImage: "3.circle")
                        }
                        // 绑定section本身作为选项的导航链接
                        NavigationLink(value: section) {
                            Label("Section Detail", systemImage: "folder.circle")
                        }
                    }
                }
            }
            .listStyle(SidebarListStyle())
            .frame(minWidth: 200)
            .navigationTitle("Sidebar")
        } detail: {
            // 统一处理不同选择的详情视图
            if let selection = selection {
                switch selection {
                case "View1":
                    View1()
                case "View2":
                    View2()
                case "View3":
                    View3()
                default:
                    Text("This is the detail view for \(selection)")
                        .navigationTitle(selection)
                }
            } else {
                Text("Please select something from the sidebar")
                    .foregroundColor(.gray)
            }
        }
        // 为基于value的NavigationLink添加目标映射
        .navigationDestination(for: String.self) { value in
            Text("This is the detail view for \(value)")
                .navigationTitle(value)
        }
    }
}

struct View1: View {
    var body: some View {
        Text("This is view 1")
            .navigationTitle("View 1")
    }
}

struct View2: View {
    var body: some View {
        Text("This is view 2")
            .navigationTitle("View 2")
    }
}

struct View3: View {
    var body: some View {
        Text("This is view 3")
            .navigationTitle("View 3")
    }
}

关键修改点 #

1. 统一List容器：将所有Section放在同一个List内部，确保侧边栏只有一个selection绑定，避免状态冲突。
2. 修正枚举错误：修复allNavigationCases中的枚举引用问题，解决编译报错。
3. 规范导航逻辑：
   • 保留tag-selection类型的NavigationLink用于指定视图跳转；
   • 为基于value的NavigationLink添加navigationDestination修饰符，确保目标匹配；
   • 详情视图通过switch分支处理不同选择值，逻辑更清晰。
4. 调整Section结构：将Section的header参数移至正确位置，符合SwiftUI语法规范。

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