如何在SwiftUI中制作侧边栏菜单

侧边栏对于在更大屏幕（例如iPad和Mac）上浏览非常有用。我们将看一下如何在多平台SwiftUI应用程序中实现侧边栏。

我们需要做的第一件事是打开一个新的Xcode项目并创建一个新的SwiftUI文件。在此示例中，我们将命名文件SideBar。在补充工具栏文件中，我们将用以下代码替换样板代码。

struct Sidebar: View {
    var body: some View {
        NavigationView {
            List {
                Label("Books", systemImage: "book.closed")
                Label("Tutorials", systemImage: "list.bullet.rectangle")
                Label("Video Tutorials", systemImage: "tv")
                Label("Contacts", systemImage: "mail.stack")
                Label("Search", systemImage: "magnifyingglass")
            }
            .listStyle(SidebarListStyle())
            .navigationTitle("Code")
        }

    }
}

在上面的示例中，我们创建了一个简单的列表视图，并为边栏添加了一些标签。然后，通过简单地添加.listStyle（SidebarListStyle（））修饰符，以边栏样式设置列表。我们还添加了导航视图，因此我们可以拥有一个不错的标题标签，并在将来将导航添加到我们的侧边栏标签中。

现在，我们将在iPad模拟器上运行此代码，并将模拟器旋转90°。现在，我们可以看到侧边栏在更大的iPad屏幕上的外观。

让我们填写示例的空白以查看在实际应用中的外观。首先，我们将从Sidebar.swift文件中删除NavigationView。然后，我们将进入ContentView文件，并在下面添加以下代码。

struct ContentView: View {
    var body: some View {
        NavigationView {
            Sidebar()
            List(0 ..< 20) {_ in
                Text("Book")
            }
            .navigationTitle("Book List")
        }
        
        
    }
}

现在，当我们运行应用程序时，我们会在侧边栏旁边获得一个模拟图书列表。

如果要在Mac版本的应用程序中使用此边栏，我们需要做的就是向项目添加几行代码。

我们需要做的第一件事是提取NavigationView花括号之间的代码。我们可以通过按住命令按钮并单击List来做到这一点。接下来，向下滚动并选择“ 提取子视图”。我们将重命名子视图SideBarContent。现在我们需要在NavigationView下添加#if，#else和#endif。这将允许我们指定我们希望边栏布局如何查找不同的操作系统。

struct Sidebar: View {
    var body: some View {
        NavigationView {
            #if os(iOS)
            SideBarContent()
                .navigationTitle("Code")
            #else
            SideBarContent()
                .frame(minWidth: 200, idealWidth: 250,maxWidth: 300)
            #endif
        }

    }
}

上面的代码使我们可以将侧边栏代码调整为适应将要运行应用程序的不同OS（操作系统）。我们需要分离代码，因为在不同的操作系统上运行我们的代码有不同的要求。在#if语句的第一部分中，我们正在检查操作系统是否为iOS，是否为iOS，然后使用导航标题设置侧边栏。我们需要在此处添加.navigationTitle（）修饰符，因为MacOS不支持它。在#else语句中，我们所需要做的就是设置Mac应用程序窗口的最小框架。最后，我们使用#endif结束if语句。

现在，我们可以在iOS和MacOS上运行侧边栏代码（我们需要在Mac上安装MacOS Big Sur，才能在Mac模拟器上运行此代码）。