macOS中NavigationSplitView与navigationDestination配合失效问题及解决

问题场景 #

在macOS平台使用NavigationSplitView，结合NavigationLink(value:)和.navigationDestination(for:)实现主-详情视图，但点击列表项后详情视图始终显示默认文本，无法切换到选中内容。

初始问题代码 #

NavigationSplitView
{
    List()
    {
        ForEach(self.items, id: \.self)
        { item in
            NavigationLink(value: item)
            {
                Text(video.name)
            }
        }
    }
    .navigationDestination(for: Item.self)
    { video in
        Text("Video \(video.name)")
    }
}
detail:
{
    Text("This should not appear")
}

关键现象 #

实际代码中最初使用了List(selection: self.$selection)（selection为Set<Item>类型），此时点击列表项无法触发详情视图切换；将List改为无选择绑定的List()后，功能恢复正常。

原因解释 #

在macOS的NavigationSplitView中，List的selection绑定和NavigationLink(value:) + .navigationDestination(for:)的路由机制存在冲突：

• 当给List设置selection时，系统会优先使用选择绑定来控制详情视图的内容，而忽略NavigationLink的value路由逻辑。
• 这种设计是因为macOS的列表默认支持多选（Set类型的selection对应多选场景），而NavigationLink(value:)是基于单一路由跳转的逻辑，两者的交互模式不兼容。

正确实现方案 #

根据需求选择其中一种模式：

方案1：使用NavigationLink(value:) + .navigationDestination（无列表选择绑定） #

适合不需要维护选中状态，仅通过点击跳转详情的场景：

struct ContentView: View {
    let items: [Item] = [Item(name: "视频1"), Item(name: "视频2")]
    
    var body: some View {
        NavigationSplitView {
            List {
                ForEach(items, id: \.self) { item in
                    NavigationLink(value: item) {
                        Text(item.name)
                    }
                }
            }
            .navigationDestination(for: Item.self) { item in
                Text("Video \(item.name)")
            }
        } detail: {
            Text("请选择一个视频")
        }
    }
}

struct Item: Identifiable, Hashable {
    let id = UUID()
    var name: String
}

方案2：使用List(selection:)控制详情视图（不使用NavigationLink路由） #

适合需要维护选中状态（比如多选、通过代码控制选中项）的场景：

struct ContentView: View {
    let items: [Item] = [Item(name: "视频1"), Item(name: "视频2")]
    @State private var selection: Set<Item> = []
    
    var body: some View {
        NavigationSplitView {
            List(items, selection: $selection) { item in
                Text(item.name)
            }
        } detail: {
            if let selectedItem = selection.first { // 多选场景下取第一个选中项
                Text("Video \(selectedItem.name)")
            } else {
                Text("请选择一个视频")
            }
        }
    }
}

struct Item: Identifiable, Hashable {
    let id = UUID()
    var name: String
}

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