SwiftUI 4中如何根据SideBar选中状态切换DetailView

iPadOS 端 NavigationSplitView 的列导航行为和 macOS 存在差异，两个问题导致故障：

1. detail 闭包内直接通过 if-let 判断选中值切换视图的写法，无法被 iPadOS 的导航栈感知状态变更，选中侧边栏项时不会触发详情页刷新
2. 代码中 navigationItem 初始值设为 .timeline，但 NavigationItem 枚举未定义该 case，属于笔误，会导致初始状态逻辑异常。

使用系统原生的 navigationDestination(for:) 修饰符绑定选中值和详情页，让导航栈自动响应 selection 变化，同时修正初始值笔误即可，修正后代码兼容 macOS、iPadOS、iOS 全平台：

struct SideBar: View {
    // 初始值改为枚举中实际存在的项，需要默认选中Timeline就先在枚举中新增对应case
    @State private var navigationItem: NavigationItem? = .item1
    
    var body: some View {
        NavigationSplitView {
            List(NavigationItem.allCases, id: \.self, selection: $navigationItem) { navigationItem in
                NavigationLink(value: navigationItem) {
                    Label(navigationItem.name, systemImage: navigationItem.symbol)
                }
            }
            // 可选：固定侧边栏宽度，避免iPadOS分屏、折叠场景下交互异常
            .navigationSplitViewColumnWidth(min: 180, ideal: 220)
        } detail: {
            if navigationItem != nil {
                // 由navigationDestination统一管理导航目标，系统会自动响应选中值变化替换详情页
                Color.clear
                    .navigationDestination(for: NavigationItem.self) { item in
                        item.rootView
                    }
            } else {
                Text("Select an Option")
            }
        }
    }
}

enum NavigationItem: CaseIterable {
    case item1
    case item2
    case item3
    case timeline // 存在Timeline项就新增该case，不需要可删除
    case item4
    
    var name: String {
        switch self {
        case .item1: return "Item 1"
        case .item2: return "Item 2"
        case .item3: return "Item 3"
        case .timeline: return "Timeline"
        case .item4: return "Item 4"
        }
    }
    
    var symbol: String {
        switch self {
        case .item1: return "1.square.fill"
        case .item2: return "2.square.fill"
        case .item3: return "3.square.fill"
        case .timeline: return "clock.fill"
        case .item4: return "4.square.fill"
        }
    }
    
    @ViewBuilder var rootView: some View {
        switch self {
        case .item1: Text("Item 1")
        case .item2: Text("Item 2")
        case .item3: Text("Item 3")
        case .timeline: Text("Timeline")
        case .item4: Text("Item 4")
        }
    }
}

• 该写法在紧凑宽度场景（如iPhone端）会自动退化为标准NavigationStack的push导航逻辑，无需额外适配
• 如果需要保留默认选中Timeline的逻辑，只需要在枚举中新增timelinecase，补全对应属性实现，再把navigationItem初始值改回.timeline即可。

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