跳到主要内容

iOS 17中的SwiftUI分栏视图控制：首选紧凑列详解

· 阅读需 3 分钟
GoSwiftUI
GoSwiftUI
goswiftui.com

在 iOS 17 中，Apple 新增了对分栏视图（Split View）折叠为单一列时显示哪一列的控制功能。

在 iOS 16 中，Apple 引入了NavigationSplitView，用于在 SwiftUI 中创建两列或三列布局。iOS 16 中的分栏视图配置包含控制列的可见性、宽度和样式的选项。然而，在较小的宽度下，缺少了控制分栏视图折叠为单一列时显示哪一列的 API。Apple 在 iOS 17（以及 macOS 14）中解决了这个问题。

首选紧凑列​

当分栏视图折叠为单一列时，默认行为是让 SwiftUI 根据列的内容自动选择要在顶部显示哪个视图。在 iPhone 上，这似乎意味着显示侧边栏视图，但这并不总是我想要的结果。

在 iOS 17 中，新增了新的初始化器，用于创建两列或三列分栏视图。在这两种情况下，可以传递一个绑定到NavigationSplitViewColumn状态的参数，该状态控制分栏视图折叠时显示哪一列。

这是一个三列版本的例子，我将初始状态设置为在折叠时显示内容视图：

struct ContentView: View {
  @State private var compactColumn = NavigationSplitViewColumn.content

  var body: some View {
    NavigationSplitView(preferredCompactColumn: $compactColumn) {
      Sidebar(compactColumn: $compactColumn)
    } content: {
      Content(compactColumn: $compactColumn)
    } detail: {
      Detail(compactColumn: $compactColumn)
    }
  }
}

NavigationSplitViewColumn类型有三个可能的值，分别是sidebar、content和detail列。更改紧凑列状态将导致分栏视图在折叠时切换到显示该列。

例如，为了使我的详细视图能够以编程方式返回到侧边栏列：

struct Detail: View {
  @Binding var compactColumn: NavigationSplitViewColumn

  var body: some View {
    Button("侧边栏") {
      compactColumn = .sidebar
    }
    .navigationTitle("详细信息")
  }
}

更改首选的紧凑列在分栏视图未折叠时不会产生可见效果，尽管它将改变下一次分栏视图折叠时的行为。