SwiftUI - 使工具栏的 NavigationLink 使用详细视图

Question

我正在开发一个两窗格的 SwiftUI 应用程序，在 DoubleColumnNavigationView 中带有侧边栏和详细信息窗格。

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

但是，视图以堆栈的形式打开，如下图 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 在放入 toolbar 时效果不佳。这里建议 - 将Button 放入toolbar 并在代码中的某处使用隐藏的NavigationLink。该按钮告诉链接打开详细视图并且链接执行操作。这是根据此建议调整的代码：

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())
    }
}