ios - 创建 SwiftUI 侧边栏

Question

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

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

我的最终目标是根据尺寸等级在选项卡 View 和侧边栏之间自动切换，但有些事情并没有按预期工作。
全局状态由 MainNavigationView 所有，这也是我的 WindowGroup 的 Root View .

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

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之后。
然而，很多事情并没有像预期的那样工作。
首先，在纵向模式的 iPad 上启动应用程序时(我使用的是 iPad Pro 11 英寸模拟器)，启动应用程序时没有选择屏幕。只有在我单击导航栏中的返回后，才会显示初始屏幕并显示我的主视图。

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

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

Answer 1

您需要在 NavigationView { } 中包含一个默认辅助 View 。 ，通常是占位符，但您可以使用 HomeScreen ，例如

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

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

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

这有点令人费解，但这意味着我们需要的侧边栏选择绑定(bind)仅适用于 macOS，在 iOS 上，它仅适用于编辑模式下的多选(即复选标记)。原因可能是因为 UITableView的选择是事件驱动的，也许无法转化为 SwiftUI 的状态驱动性质。如果您曾经尝试使用已推送到导航 Controller 上的 View 进行状态恢复，并尝试在弹出时显示单元格取消突出显示动画并且未加载该表格 View 并且单元格从未突出显示，那么您将明白我的意思了吗。同步加载表格，绘制选定的单元格然后启动取消突出显示动画是一场噩梦。我希望 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 个错误:

在纵向中，侧边栏仅在侧边栏导航按钮的第二次点击时显示。

如果您显示侧边栏并选择已显示的相同项目，则侧边栏不会关闭。