概览
在 SwiftUI 开发中，苹果为我们提供了多种辅助视图用来显示额外信息从而极大丰富了应用的表现力，比如：Alert、Sheet、ContextMenu 等等。
从 SwiftUI 5.0（iOS 17+）开始， 又增加了一种全新的辅助视图：Inspector。
在本篇博文中，您将学到如下内容：
- Inspector 视图简介
- Inspector 在不同平台上的表现
- 对 Inspector 进一步精细控制
- Inspector 在 iPad 横屏、竖屏以及 Mac 上的细微差别
- 利用快捷键在 Mac 上弹出 Inspector
相信学完本课后，小伙伴们即可充分利用 Inspector 在不同平台卓越的兼容性和灵动性让自己的 App 更加神采飞扬。
闲言少叙，让我们马上开始 Inspector 大冒险吧！
Let's go！;)
1. Inspector 视图简介
Inspector 是 SwiftUI 5.0 推出了一款新的辅助视图，我们可以使用 inspector 修改器方法来弹出它：
Inspector 可以非常方便的被用来显示 App 当前视图中的额外辅助信息，比如主视图列表中某一用户或产品对象的详细内容。
Inspector 一个非常 Nice 的地方是它在不同平台那极具常灵活的适配性。它可以根据不同设备的屏幕、屏幕的不同旋转方向因地制宜的自动采用不同的策略来展现自己，而这些都无需我们自己写哪怕半行代码。
2. Inspector 在不同平台上的表现
在 SwiftUI 中我们使用 Inspector 可以说是简单的不要不要的：
swift
struct InspectorView: View {
let name: String
var body: some View {
Form {
Section("Sketch") {
HStack {
Spacer()
Image("bjt")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 100, height: 200)
Spacer()
}
LabeledContent("size", value: item.count.formatted())
}
Section("Details") {
List(0...10, id: \.self) { id in
Text("Id: \(id)")
.padding()
}
}
}
.navigationTitle("Inspector")
}
}
struct ContentView: View {
@Environment(\.horizontalSizeClass) var horizontalSize
let name: String
@State private var inspectorShow = false
@State var inspectorWidth: CGFloat = 100.0
var body: some View {
VStack {
Text(verbatim: name)
Button {
inspectorShown.toggle()
} label: {
Label("Inspector", systemImage: "info.circle.fill")
}
.buttonStyle(.borderedProminent)
}
.navigationTitle("Details")
.inspector(isPresented: $inspectorShow) {
InspectorView(name: name)
}
}
}在上面的代码中，我们利用 inspectorShow 状态并通过 inspector() 修改器方法非常"丝滑"的弹出了定制的 InspectorView 视图。
更为妙哉的是：这些代码在 iPhone、iPad、Mac 等多种平台上都表现的"顶呱呱"：
可以看到在 iPad 和 Mac 这些大屏设备上弹出的 Inspector 视图从右侧滑入，而在 iPhone 这种小屏设备上 Inspector 会退化为 Sheet 视图。
3. 对 Inspector 进一步精细控制
如果我们希望的话，SwiftUI 提供了进一步精细控制 Inspector 外观的方法。
具体来说，我们可以使用 inspectorColumnWidth(min:ideal:max:) 修改器方法通过最小、理想以及最大三个形参来控制 Inspector 视图列的宽度：
值得注意的是 inspectorColumnWidth 方法要应用在 inspector 修改器内部的视图上：
swift
@State var inspectorWidth: CGFloat = 100.0
var body: some View {
VStack {
Text(verbatim: name)
Button {
inspectorShow.toggle()
} label: {
Label("Inspector", systemImage: "info.circle.fill")
}
.buttonStyle(.borderedProminent)
Slider(value: $inspectorWidth, in: 50.0...500.0)
.padding()
}
.navigationTitle("Details")
.inspector(isPresented: $inspectorShow) {
InspectorView(name: name)
// 动态调整 Inspector 视图的理想列宽度
.inspectorColumnWidth(min: 100, ideal: inspectorWidth, max: 500)
}
}不过在 iPhone 设备上由于 Inspector 退化为了 Sheet 视图，所以我们只能通过 Sheet 相关的修改器方法来控制其对应的外观显示，比如 presentationDetents() 方法：
swift
InspectorView(name: name)
// 动态调整 Inspector 视图的理想列宽度
.inspectorColumnWidth(min: 100, ideal: inspectorWidth, max: 500)
// 在 iPhone 设备上调整的是 Sheet 的高度
.presentationDetents([.medium, .large])运行代码看一下效果，在某些情况下（iPad 横屏）我们甚至可以动态实时改变 Inspector 的列宽度，就问你们要不要赞一个！？
4. Inspector 在 iPad 横屏、竖屏以及 Mac 上的细微差别
之前我们讨论过 Inspector 会在 iPhone 设备上退化为 Sheet 视图，所以在这些小屏设备上是无法用 inspectorColumnWidth 调整 Inspector 列宽度的。相反，我们调整的是 Sheet 的高度。
除此之外，在 iPad 竖屏状态下弹出 Inspector 时主视图会处于"不可交互状态"，此时我们只能通过简单点击来关闭 Inspector 而不能在主视图里调整其列宽度：
于此类似，由于在 Mac 中我们可以通过手势来直接调整 Inspector 视图的列宽度，所以在这种情况下我们也就无法通过 inspectorColumnWidth() 方法来做同样的事儿了：
5. 利用快捷键在 Mac 上弹出 Inspector
在 Mac 或 Catalyst 系统中，我们还可以充分利用物理键盘的便捷性为 Inspector 视图添加弹出快捷键，这是通过 InspectorCommands 命令集合来实现的：
简单来说，我们可以在 App 对应的 WindowGroup（或相同类型的组件）上调用 commands() 修改器方法，并在其中添加 InspectorCommands 命令集：
swift
import SwiftUI
@main
struct testApp: App {
var body: some Scene {
WindowGroup {
ContentView(name: "大熊猫侯佩")
}
.commands {
InspectorCommands()
}
}
}如此一来，我们就可以通过物理键盘快捷键组合 ⌘⌃I 来随时恣意弹出视图中的 Inspector 啦：
在上面的演示中后两次 Inspector 的弹出我们使用的是物理键盘快捷键，是不是更加干脆利落呢？
至此，我们完全掌握了 SwiftUI 中 Inspector 辅助视图在各种平台上的使用之道，小伙伴们还不赶快操练起来，棒棒哒！💯
总结
在本篇博文中，我们讨论了 SwiftUI 5.0（iOS 17.0+，macOS 14.0+ Mac Catalyst 17.0+）中新 Inspector 的驾驭之道，并进一步讨论了不同平台中 Inspector 表现的细微差别，最后我们为 Inspector 添加了物理快捷键让其弹出更加的巧捷万端。
感谢观赏，再会！8-)