如何切换 NavigationView 的第三个窗格的可见性？答案

【问题标题】：How to toggle the visibility of the third pane of NavigationView?如何切换 NavigationView 的第三个窗格的可见性？
【发布时间】：2021-02-14 02:55:00
【问题描述】：

假设如下 NavigationView：

Struct ContentView: View {
   @State var showRigthPane: Bool = true 

   var body: some View {
       NavigationView {
           Sidebar()
           MiddlePane()
           RightPane()
       }.toolbar {
           ToolbarItem(placement: .navigation) {
                Button(action: toggleSidebar, label: {Image(systemName: "sidebar.left")})
            }
           ToolbarItem(placement: .primaryAction) {
               Button(action: self.toggleRightPane, label: { Image() })
           }
       }
   }

   private func toggleRightPane() {
       // ?
   }
   
   // collapsing sidebar - this works
   private func toggleSidebar() {
        NSApp.keyWindow?.initialFirstResponder?.tryToPerform(
            #selector(NSSplitViewController.toggleSidebar(_:)), with: nil)
    }

}

如何实现toggleRightPane() 函数来切换右窗格的可见性？

【问题讨论】：

标签： macos swiftui appkit

【解决方案1】：

更新以使用返回两个不同导航视图的计算属性。侧边栏的行为仍然很奇怪，但通过变通方法可以正常工作。希望有人能弄清楚侧边栏的行为。

struct ToggleThirdPaneView: View {
    @State var showRigthPane: Bool = true
    
    var body: some View {
        VStack {
            navigationView
        }
        .navigationTitle("Show and Hide")
    }
    
    var navigationView : some View {
        if showRigthPane {
            return AnyView(NavigationView {
                VStack {
                    Text("left")
                }
                .toolbar {
                    Button(action: { showRigthPane.toggle() }) {
                        Label("Add Item", systemImage: showRigthPane ? "rectangle.split.3x1" : "rectangle.split.2x1")
                    }
                }
                Text("middle")
            }
            )
        } else {
            return AnyView(NavigationView {
                VStack {
                    Text("left")
                }
                .toolbar {
                    Button(action: { showRigthPane.toggle() }) {
                        Label("Add Item", systemImage: showRigthPane ? "rectangle.split.3x1" : "rectangle.split.2x1")
                    }
                }
                Text("middle")
                Text("right")
            })
        }
    }
}

【讨论】：

这种方法不会关闭右窗格拆分（即 NavigationView 的第三个窗格）。因此，即使在切换 showRightPane boolean 之后，使用您的代码，仍然存在三个窗格，现在第三个窗格只有一个 EmptyView。
代码已更新。更接近，但仍然不是 100%。请试一试。
是的，这样的工作，但就像你说的侧边栏看起来很奇怪。我认为解决方案是调用 NSSplitViewController 并折叠侧视图，尽管我不知道如何。我将编辑我的问题以显示我当前如何关闭侧边栏拆分，也许会有所帮助

【解决方案2】：

尝试以下（无法测试）

struct ContentView: View {
   @State private var showRigthPane = true 

   var body: some View {
       NavigationView {
           Sidebar()
           MiddlePane()
           if showRigthPane {    // << here !!
               RightPane()
           }
       }.toolbar {
           ToolbarItem(placement: .primaryAction) {
               Button(action: self.toggleRightPane, label: { Image() })
           }
       }
   }

   private func toggleRightPane() {
       withAnimation {
          self.showRigthPane.toggle()     // << here !!
       }
   }
}

【讨论】：

不幸的是，这不起作用，仍然显示三个拆分，切换后右侧窗格为空。