创建 SwiftUI 侧边栏

我想使用 SwiftUI 构建一个非常简单的 iOS 14 侧边栏。 设置很简单，我有三个视图HomeView, LibraryView and SettingsView和代表每个屏幕的枚举。

enum Screen: Hashable {
   case home, library, settings
}

我的最终目标是根据尺寸类别在选项卡视图和侧边栏之间自动切换，但有些事情并不完全按预期工作。

全球国家由MainNavigationView，这也是我的根视图WindowGroup.

struct MainNavigationView: View {
    @State var screen: Screen? = .home
   
    var body: some View {
        NavigationView {
            SidebarView(state: $screen)
        }
        .navigationViewStyle(DoubleColumnNavigationViewStyle())
    }
}

The SidebarView是一个简单的List包含三个NavigationLink, 每人一个Screen.

struct SidebarView: View {
    @Binding var state: Screen?
    var body: some View {
        List {
            NavigationLink(
                destination: HomeView(),
                tag: Screen.home,
                selection: $state,
                label: {
                    Label("Home", systemImage: "house" )
                })
            NavigationLink(
                destination: LibraryView(),
                tag: Screen.library,
                selection: $state,
                label: {
                    Label("Library", systemImage: "book")
                })
            NavigationLink(
                destination: SettingsView(),
                tag: Screen.settings,
                selection: $state,
                label: {
                    Label("Settings", systemImage: "gearshape")
                })
        }
        .listStyle(SidebarListStyle())
        .navigationTitle("Sidebar")
    
    }
}

我用NavigationLink(destination:tag:selection:label)初始化程序，以便在我的中设置所选屏幕MainNavigationView这样我就可以将其重新用于我的TabView later.

然而，很多事情并不完全按照预期进行。

首先，在纵向模式iPad（我使用iPad Pro 11英寸模拟器）中启动应用程序时，启动应用程序时没有选择屏幕。只有在我点击之后Back在导航栏中，显示初始屏幕并显示我的主视图。

第二个奇怪的事情是绑定似乎设置为nil每当侧边栏被隐藏时。在横向模式下，视图按预期工作，但是当将侧边栏切换为隐藏然后再次显示时，选择会丢失。 内容视图保持正确，但侧边栏选择丢失。

这些只是SwiftUI错误或者是否有不同的方法来创建带有Binding?

您需要在NavigationView { }，通常它是一个占位符，但你可以使用HomeScreen, e.g.

struct MainNavigationView: View {
    @State var screen: Screen? = .home
   
    var body: some View {
        NavigationView {
            SidebarView(state: $screen)
            HomeScreen()
        }
        .navigationViewStyle(DoubleColumnNavigationViewStyle())
    }
}

关于不重新选择的单元格 - 从 iOS 14.2 开始，没有列表选择绑定（当不处于编辑模式时），因此选择会丢失。虽然 List API 有一个$selectionparam，目前仅在 macOS 上支持。您可以在标题中看到该信息：

/// On iOS and tvOS, you must explicitly put the list into edit mode for
/// the selection to apply.

这有点复杂，但这意味着我们需要的侧边栏选择绑定仅适用于 macOS，在 iOS 上它仅适用于编辑模式下的多选（即复选标记）。原因可能是因为UITableView的选择是事件驱动的，也许无法转化为 SwiftUI 的状态驱动性质。如果您曾经尝试使用已推送到导航控制器上的视图进行状态恢复，并尝试在弹出时显示单元格取消突出显示动画，并且该表视图未加载并且单元格从未突出显示，那么您将明白我的意思了吗。同步加载表格、绘制所选单元格然后启动取消突出显示动画是一场噩梦。我预计 Apple 将在纯 SwiftUI 中重新实现 List、Sidebar 和 NavigationView 来克服这些问题，所以现在我们只能忍受它。

一旦解决了这个问题，事情就会变得简单List(selection:$screen) { }就像它在 macOS 上的工作方式一样。作为 iOS 上的解决方法，您可以按照自己的方式突出显示图标或文本，例如尝试使用粗体文本：

    NavigationLink(
        destination: HomeView(),
        tag: Screen.home,
        selection: $state,
        label: {
            Label("Home", systemImage: "house" )
        })
        .font(Font.headline.weight(state == Screen.home ? .bold : .regular))

紧凑时它看起来不太好，因为弹出主视图后，当行未突出显示时，粗体将被删除。在这种情况下，可能有一种方法可以禁用粗体。

您还应该注意另外 2 个错误：

1. 在纵向中，侧边栏仅在第二次点击侧边栏导航按钮时显示。
2. 在纵向模式下，如果您显示侧边栏并选择已显示的相同项目，则侧边栏不会消失。