SwiftUI - 使工具栏的 NavigationLink 使用详细 View

Question

我正在开发一个双面板 SwiftUI 应用程序，它在 DoubleColumnNavigationView 中带有侧边栏和详细信息 Pane 。

我想从侧边栏的工具栏打开一个 NavigationLink 到详细信息 Pane ，如下面 gif 中的“从侧边栏打开”所示。

但是， View 以堆栈形式打开，如下面 gif 中的“从工具栏打开”所示。

使用 isDetailLink(true) 似乎没有效果。

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                NavigationLink(destination: Text("Opened from sidebar")) {
                    Text("Open from sidebar")
                }
            }.listStyle(SidebarListStyle())
            .navigationTitle("Sidebar")
            .toolbar {
                ToolbarItem {
                    // This should open in detail pane
                    NavigationLink(destination: Text("Opened from toolbar")) {
                        Text("Open from toolbar")
                    }
                }
            }
            Text("Detail pane")
        }.navigationViewStyle(DoubleColumnNavigationViewStyle())
    }
}

Answer 1

通用解决方案

您可能知道，NavigationLink 放在工具栏 中时效果不佳。这里的建议是将 Button 放入 toolbar 并在代码中的某处使用隐藏的 NavigationLink。该按钮告诉链接打开详细信息 View ，链接执行操作。这是根据此建议调整的代码:

struct ContentView: View {
    /// A state that tracks whether the link in the toolbar should be opened
    @State var toolbarLinkSelected = false
    
    var body: some View {
        NavigationView {
            List {
                NavigationLink(destination: Text("Opened from sidebar")) {
                    Text("Open from sidebar")
                }
            }.listStyle(SidebarListStyle())
            .navigationTitle("Sidebar")
            .toolbar {
                ToolbarItem {
                    Button(action: { toolbarLinkSelected = true }) {
                        Text("Open from toolbar")
                    }
                }
            }
            .background(
                NavigationLink(
                    destination: Text("Opened from toolbar"),
                    isActive: $toolbarLinkSelected
                ) {
                    EmptyView()
                }.hidden() // The link is not visible to user
            )
            Text("Detail pane")
        }.navigationViewStyle(DoubleColumnNavigationViewStyle())
    }
}

iOS/iPadOS 唯一解决方案

另外，如果您只需要支持 iOS 和 iPadOS，您可以使用 navigationBarItems 的旧方法来实现它。这在 macOS 上不起作用，因为此修改器不可用，但适用于 iOS/iPadOS。这是示例:

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                NavigationLink(destination: Text("Opened from sidebar")) {
                    Text("Open from sidebar")
                }
            }.listStyle(SidebarListStyle())
            .navigationTitle("Sidebar")
            .navigationBarItems(trailing: NavigationLink(destination: Text("Opened from toolbar")) {
                Text("Open from toolbar")
            })
            Text("Detail pane")
        }.navigationViewStyle(DoubleColumnNavigationViewStyle())
    }
}