Build programmatic UI with Xcode Previews
Developer Tools 进阶 20m

用 Xcode Previews 构建声明式 UI

Build programmatic UI with Xcode Previews

2023年6月5日

在 Apple 官方观看视频

一句话判断

Xcode Previews 不仅仅是看 UI，它还是你迭代设计和调试最快的方式。

这场 Session 讲了什么

Session 深入讲解了 Xcode Previews 的工作原理和最佳实践。Preview 是一段编译进 app 的代码，可以访问项目中的所有符号和资源。当你在源文件顶层使用 #Preview 宏定义 preview 时，Xcode 会自动构建并展示结果。

Previews 支持三种模式：Live 模式（默认，可交互，支持动画和异步代码）、Selection 模式（静态快照，可点击元素定位到源码）和 Variants 模式（同时展示不同配色、动态类型大小等变体）。

内容类型分为两类：Views（SwiftUI、UIKit、AppKit）和 Widgets。SwiftUI 视图直接返回即可。UIKit 返回 UIViewController 或 UIView。AppKit 返回 NSViewController 或 NSView。Widget 使用 WidgetConfiguration 和 preview context。

Device Settings 面板可以快速切换颜色方案、动态类型大小等，无需修改代码。Canvas 底部的控制按钮让你轻松在不同模式间切换。

值得深挖的点

Previews 和测试的类比很有启发。两者都运行真实代码，都帮助你更快地开发，都可以在不同层级工作。就像测试有 UI 测试和单元测试，Previews 也有覆盖大量功能的场景 preview 和专注于单个组件的 leaf preview。

Variants 模式是一个强大的工具。它可以同时展示你的 UI 在浅色/深色模式、不同动态类型大小下的表现，而不需要写多份代码。这对于确保 UI 在各种配置下都正确非常有用。

代码片段

// SwiftUI Preview
#Preview {
    FilterView(image: sampleImage)
}

// 配置名称和特性
#Preview("Landscape", traits: .landscapeLeft) {
    FilterView(image: sampleImage)
}

// UIKit Preview
#Preview {
    let vc = MyViewController()
    return vc
}

// Variants - 同时查看多种配置
// 在 Canvas 底部选择 Variants 模式
// 自动展示不同配色、动态类型等变体

// Widget Preview
#Preview(as: .systemSmall) {
    MyWidgetEntryView(entry: .sample)
} timeline: {
    MyTimelineProvider().getTimeline(in: .current)
}

最佳实践

  • 从 leaf view 的 preview 开始，逐步构建更复杂的场景
  • 使用 Device Settings 快速切换颜色方案和动态类型
  • 利用 Variants 模式同时检查多种 UI 配置
  • Preview 就像 scene 的入口，在这里设置数据和依赖
  • Selection 模式帮助你从 UI 元素快速定位到源码

还有什么值得关注

  • Canvas 模式默认在新项目中启用，旧项目需要手动开启
  • Previews 编译进 app，可以访问所有项目资源
  • Xcode 只重新编译变更的最小代码量
  • 参考 Widget 相关 session 了解 Widget Preview 的细节
WWDC 2023