[原文地址]（mp.weixin.qq.com/s?__biz=Mzg…
在应用程序开发过程中，设计和调整界面是一个重要的环节。为了更高效地进行界面设计和开发，苹果在Xcode 15中引入了预览功能，让开发者能够通过代码对应用程序的视图进行更改，并在预览画布中即时查看这些更改的结果。
然而，在Xcode 16中，苹果进一步优化了预览功能，为开发者提供了更强大的工具和功能来提升开发体验。下面我们来一起探索一下Xcode 16中增强的预览功能吧！
如何显示预览视图
当你在Xcode中创建一个视图时，你可以在预览画布中显示它。预览画布展示了你的视图在不同设备的各种配置下的显示情况；
Swift预览宏是一段代码片段，用于创建和配置你的视图。你可以使用其中一个预览宏，例如Preview(_:body:)，告诉Xcode要显示什么内容。要手动显示或隐藏预览画布，请在Xcode菜单中选择"Editor > Canvas"。
class WeatherViewController: UIViewController {
// ...
}
// A UIKit UIViewController preview.
#Preview {
let viewController = WeatherViewController()
viewController.title = "Current Weather"
return viewController
}
class WeatherView: UIView {
var icon: UIImage?
}
// A UIKit UIView preview.
#Preview {
let view = WeatherView()
if let image = UIImage(systemName: "sun.max.fill") {
view.icon = image
}
return view
}
与预览视图的交互模式
实时模式
当你在实时模式下与预览视图进行交互，就像在设备或模拟器上来展现和操作你的视图一样。使用该预览模式来测试控制逻辑、动画、文本输入以及对异步代码的响应。
选择模式
在选择模式下，预览会显示视图的快照，以便您可以在画布中与视图的UI元素进行交互。在预览中选择一个控件会突出显示源代码编辑器中相应的代码行。双击某些文本视图，例如标签（Label），会将焦点移动到源代码编辑器，以便您可以快速进行更改。
控制预览的显示方式
- 可以使用设备设置来控制预览在特定设备上的显示方式。例如，要查看您的视图在暗黑模式、横竖屏和超大文本下的外观；
- 还可以使用变体模式（Variant mode）可以查看你的视图在给定配置的不同变体下的外观。
- 以下是预览画布支持的几种常用变体：
- 颜色模式变体：预览画布提供了浅色和深色两种颜色模式的预览。
- 方向变体：预览画布可显示你的视图在各种纵向和横向方向的外观。
- 动态类型变体：预览画布支持以应用程序的所有辅助功能文本大小显示视图。
通过利用设备的设置功能和变体模式，你可以更全面地测试和优化你的视图，以确保其在不同设备、颜色方案和辅助功能设置下都能以最佳方式呈现给用户。这有助于提升你的应用程序的可用性和用户体验质量。
使用代码来配置预览
除了Xcode提供的预览选项之外，您还可以以代码方式自定义和配置要重复使用的预览。
例如，您可以为每个预览添加一个名称，以便更容易跟踪每个预览显示的内容。当您将预览的名称作为字符串传递给预览宏时，该名称将显示在预览画布中预览的标题中。
#Preview("2x2 Grid Portrait") {
Content()
}
还可以通过将一个或多个配置特性作为可变参数列表传递给预览宏，来控制预览的显示方式。例如，要在左横向方向中显示您的视图，请通过将landscapeLeft类型属性传递给init(_:traits:body:)预览初始化器，告诉Xcode要显示的方向。
#Preview("Camera setting sunning day", traits: .landscapeLeft) {
let viewController = CameraViewController()
if let image = UIImage(systemName: "sun.max.fill") {
viewController.lastImage = image
}
return viewController
}
总结
在创建视图时，只传递视图显示所需的数据，避免传递获取数据的对象；对象会使设置视图预览变得更复杂且性能较差。
相反，使用视图所需的最少数据创建视图，优先选择简单的不可变数据类型。以这种方式创建视图可以更轻松地测试和预览视图，并使其性能更好。
