如何在 SwiftUI macOS 应用程序中显示和隐藏侧边栏(教程含源码)

问题

用户可以通过在边缘拖动侧边栏来调整它的大小。如果他们将其拖得足够远,侧边栏将关闭,并且无法将其取回。

本文将告诉您如何通过添加其他选项来显示和隐藏侧边栏来缓解此问题。

这是行动中的问题。一旦侧边栏折叠,就无法恢复。拖动左边缘会调整窗口大小,而不是将侧边栏带回来。

解决方案

有两种方法可以解决这个问题。

  • 添加菜单以显示和隐藏侧边栏。
  • 添加一个工具栏按钮来切换它。

添加切换侧边栏菜单选项

要在 macOS 上添加新菜单,我们将所需的命令添加到.commands修饰符。在这种情况下我们需要的命令是SidebarCommands.

@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }.commands {
            SidebarCommands() // 1
        }
    }
}

<1> 传递SidebarCommands给commands修饰符,添加一组操作侧边栏的命令。

添加后,您将在“查看”菜单下获得“切换侧边栏”菜单。用户可以通过转到“查看”菜单 >“切换侧边栏”或使用快捷键⌘ – command+ ⌥ – option+来扩展丢失的侧边栏S。

![在这里插入图片描述](https://img-blog.csdnimg.cn/17e6c47a12b1402dac7d5bb2df04c4d5.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lDbG91ZEVuZA==,size_16,color_FFFFFF,t_70)

## 添加切换侧边栏工具栏按钮
菜单和快捷方式对用户来说可能并不明显。我认为更好的方法是为这个动作添加一个 UI 组件。没有 SwiftUI 界面可以做到这一点,所以我们依赖 AppKit 界面。

我们向工具栏添加一个调用该toggleSidebar方法的按钮。
“`
struct ContentView: View {
var body: some View {
NavigationView {
Text("Sidebar")
Text("Content")
}.toolbar {
ToolbarItem(placement: .navigation) {
Button(action: toggleSidebar, label: { // 1
Image(systemName: "sidebar.leading")
})
}
}
}

private func toggleSidebar() { // 2
#if os(iOS)
#else
NSApp.keyWindow?.firstResponder?.tryToPerform(#selector(NSSplitViewController.toggleSidebar(_:)), with: nil)
#endif
}
}
“`
<1> 向工具栏添加按钮。
<2> 呼叫toggleSidebar第一响应者。

您将获得一个按钮,可在点击时切换侧边栏。该按钮位于上下文周围。它比菜单选项更容易到达。
![在这里插入图片描述](https://img-blog.csdnimg.cn/2514ba289e9043dd9bda04ce60cfdabb.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lDbG91ZEVuZA==,size_16,color_FFFFFF,t_70)

# 推荐
– [《SwiftUI macOS开发教程》](https://www.openswiftui.com/?gr_redirect=csdn-swiftui-macos%e5%bc%80%e5%8f%91%e6%95%99%e7%a8%8b)

# 加入我们一起学习SwiftUI
QQ:3365059189
SwiftUI技术交流QQ群:518696470
教程网站:[www.openswiftui.com](https://www.openswiftui.com)

发表回复