SwiftUI DoubleColumnNavigationView工具栏NavigationLink跳转详情页问题

问题根因 #

位于侧边栏toolbar内的NavigationLink默认归属侧边栏导航上下文，isDetailLink(true)修饰符在该场景下不会生效，因此点击后会将页面压入侧边栏导航栈，而非在详情面板展示，属于SwiftUI双栏导航的已知行为。

解决方案1：程序式绑定详情栏内容（推荐） #

通过状态变量绑定详情栏的展示内容，点击工具栏按钮直接修改状态即可切换详情页，可控性更高，适配复杂业务场景：

struct ContentView: View {
    // 定义详情页可选项，可根据业务需求扩展
    enum DetailDestination: Hashable {
        case defaultPane
        case fromSidebar
        case fromToolbar
    }
    
    @State private var detailSelection: DetailDestination? = .defaultPane
    
    var body: some View {
        NavigationView {
            List {
                NavigationLink(tag: .fromSidebar, selection: $detailSelection) {
                    Text("Opened from sidebar")
                } label: {
                    Text("Open from sidebar")
                }
            }
            .listStyle(SidebarListStyle())
            .navigationTitle("Sidebar")
            .toolbar {
                ToolbarItem {
                    // 点击按钮直接修改详情页绑定值
                    Button("Open from toolbar") {
                        detailSelection = .fromToolbar
                    }
                }
            }
            
            // 按绑定值动态渲染详情页
            if let selection = detailSelection {
                switch selection {
                case .defaultPane: Text("Detail pane")
                case .fromSidebar: Text("Opened from sidebar")
                case .fromToolbar: Text("Opened from toolbar")
                }
            } else {
                Text("Detail pane")
            }
        }
        .navigationViewStyle(DoubleColumnNavigationViewStyle())
    }
}

解决方案2：隐藏触发式导航链接（低改造成本） #

如果项目结构简单不想做大规模重构，可以将目标NavigationLink移到侧边栏内容层级中隐藏，通过状态变量触发跳转，此时isDetailLink修饰符可正常生效：

struct ContentView: View {
    @State private var showToolbarDetail = false
    
    var body: some View {
        NavigationView {
            List {
                NavigationLink(destination: Text("Opened from sidebar")) {
                    Text("Open from sidebar")
                }
                // 隐藏的导航链接，归属于侧边栏内容层级，isDetailLink可生效
                NavigationLink(isActive: $showToolbarDetail) {
                    Text("Opened from toolbar")
                } label: {
                    EmptyView()
                }
                .isDetailLink(true)
                .hidden()
            }
            .listStyle(SidebarListStyle())
            .navigationTitle("Sidebar")
            .toolbar {
                ToolbarItem {
                    Button("Open from toolbar") {
                        showToolbarDetail = true
                    }
                }
            }
            Text("Detail pane")
        }
        .navigationViewStyle(DoubleColumnNavigationViewStyle())
    }
}

两种方案均可实现工具栏触发跳转至详情面板的需求，可根据项目复杂度选择对应实现。

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