如何在SwiftUI macOS应用程序中显示和隐藏边栏

2024-02-01 23:51:02

在 SwiftUI macOS 应用程序中灵活显示和隐藏侧边栏

在 SwiftUI 应用程序中，您可以将 Sidebar 添加到 WindowGroup 中，从而在您的 macOS 应用程序中轻松显示和隐藏侧边栏。这个灵活的功能使您可以根据需要调整您的用户界面，优化应用程序的可访问性和易用性。

如何在 SwiftUI 应用程序中使用侧边栏

1. 创建侧边栏视图

首先，在您的 ContentView 中创建一个 Sidebar 视图。此视图将包含您希望在侧边栏中显示的内容，例如列表、导航链接或其他自定义 UI 元素。

struct SidebarView: View {
    var body: some View {
        List {
            Text("Item 1")
            Text("Item 2")
            Text("Item 3")
        }
    }
}

2. 将侧边栏添加到窗口

接下来，将您创建的 Sidebar 视图添加到 WindowGroup 中。WindowGroup 是一个 SwiftUI 视图，可让您创建多个窗口。

struct ContentView: View {
    var body: some View {
        WindowGroup {
            SidebarView()
        }
    }
}

3. 创建一个显示/隐藏按钮

最后，创建按钮或其他控件以显示和隐藏侧边栏。您可以根据需要将其添加到您的工具栏、菜单栏或任何其他方便的位置。

struct ContentView: View {
    @State private var isSidebarVisible = false

    var body: some View {
        WindowGroup {
            SidebarView()
                .frame(width: isSidebarVisible ? 200 : 0)
        }
        .toolbar {
            Button(action: {
                withAnimation {
                    isSidebarVisible.toggle()
                }
            }) {
                Image(systemName: "sidebar.left")
            }
        }
    }
}

当用户点击该按钮时，它会切换 isSidebarVisible 的状态，相应地显示或隐藏侧边栏。

使用 Sidebar API 进行高级控制

如果您需要更高级的控制，Sidebar API 可以让您自定义侧边栏的外观和行为。您可以指定其宽度、位置、背景颜色以及其他设置。

struct ContentView: View {
    @State private var isSidebarVisible = false

    var body: some View {
        WindowGroup {
            Sidebar(isPresented: $isSidebarVisible) {
                SidebarView()
            }
        }
        .toolbar {
            Button(action: {
                withAnimation {
                    isSidebarVisible.toggle()
                }
            }) {
                Image(systemName: "sidebar.left")
            }
        }
    }
}