跳到主要内容

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

· 阅读需 3 分钟
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类型有三个可能的值,分别是sidebarcontentdetail列。更改紧凑列状态将导致分栏视图在折叠时切换到显示该列。

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

struct Detail: View {
@Binding var compactColumn: NavigationSplitViewColumn

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

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