SwiftUI 6.0（Xcode 16）新 PreviewModifier 协议让预览调试如虎添翼

概览

用 SwiftUI 框架开发过应用的小伙伴们都知道，SwiftUI 中的视图由各种属性和绑定"扑朔迷离"的缠绕在一起，自成体系。

想要在 Xcode 预览中泰然处之的调试 SwiftUI 视图有时并不是件容易的事。其中，最让人秃头码农们头疼的恐怕就要数如何正确的向预览传入视图内部的状态了。

在本篇博文中，您将学到如下内容：

概览
[1. PreviewModifier 到底有啥用？](#1. PreviewModifier 到底有啥用？)
[2. 用 PreviewModifier "点缀"预览视图外观](#2. 用 PreviewModifier “点缀”预览视图外观)
[3. PreviewModifier 诞生之前我们如何向预览传送数据？](#3. PreviewModifier 诞生之前我们如何向预览传送数据？)
[4. 用 PreviewModifier 注入（inject）预览模拟数据](#4. 用 PreviewModifier 注入（inject）预览模拟数据)
总结

遵循 SwiftUI 6.0（Xcode 16）新推出的 PreviewModifier 协议，正可谓是："你好，我好，大家都好"。

不信？且看分晓！Let's go！！！😉

1. PreviewModifier 到底有啥用？

从 SwiftUI 6.0 开始，顺便借助 Xcode 16 的东风，苹果推出了全新的 PreviewModifier 协议：

正如该协议"自夸"的那样：PreviewModifier 可以让 Xcode 预览（Preview）界面和调试数据"浑然天成，融洽无间"。

有了 PreviewModifier，我们即可从两个方面来为预览调试"雪中送炭"：

统一改变预览中视图的外观；
为预览视图传入模拟测试数据；

下面，就让我们依次来看看它们究竟是如何"大施拳脚"的吧。

2. 用 PreviewModifier "点缀"预览视图外观

假若我们希望 Xcode 预览中某些被调试的视图都放在导航容器中，并且根据实际情况增加导航标题和导航栏 Logo。

注意，这些视图的 body 代码自身并没有嵌入到导航视图内，因为这是使用它们的父视图份内的事儿。这意味着，我们必须繁文缛节的在所有预览中将这些视图嵌入到导航视图中去：

swift 复制代码

#Preview {
    NavigationStack {
        ContentView()
            .navigationTitle("SwiftUI 滚动行为演示")
            .toolbar {
                Text("大熊猫侯佩 @ \(Text("CSDN").foregroundStyle(.red))")
                    .foregroundStyle(.orange)
                    .font(.headline.weight(.heavy))
            }
    }
}

如上代码所示：我们不但要在预览中为每个"潜在的"导航子视图添加导航容器（NavigationStack），还要不厌其烦的为它们设置相应的导航标题和 Logo 视图。

现在，我们看看 PreviewModifier 协议能为我们做些什么吧：

swift 复制代码

struct NavPreviewHelper: PreviewModifier {
    
    var title: String
    
    func body(content: Content, context: Void) -> some View {
        NavigationStack {
            content
                .navigationTitle(title)
                .toolbar {
                    Text("大熊猫侯佩 @ \(Text("CSDN").foregroundStyle(.red))")
                        .foregroundStyle(.orange)
                        .font(.headline.weight(.heavy))
                }
        }
    }
}

如大家所见，我们创建了一个 NavPreviewHelper 结构，并让其遵循 PreviewModifier 协议。我们只需实现其中的 body 方法，然后将预览测试的视图包裹在导航容器（NavigationStack）内部，并妥善为其设置了标题和预览 Logo。

有了 NavPreviewHelper 这位"贤内助"，我们可以易如反掌的将任何需要"如此炮制"的预览测试视图嵌入到 NavigationStack 中并妥善"装扮"了：

swift 复制代码

#Preview(traits: .modifier(NavPreviewHelper(title: "SwiftUI 滚动行为演示"))) {
    ContentView()
}

#Preview("另一个视图", traits: .modifier(NavPreviewHelper(title: "另一个视图演示"))) {
    Text("另一个测试视图！")
}

从下面的演示中大家可以看到，我们的 NavPreviewHelper 就像"预览模版"一样，可供任何有此需求的预览视图使用了：

我们甚至还能通过 PreviewTrait 扩展，进一步简化 #Preview 宏中 NavPreviewHelper 的调用：

swift 复制代码

extension PreviewTrait where T == Preview.ViewTraits {
    @MainActor static func navHelper(_ title: String) -> PreviewTrait<T> {
        .modifier(NavPreviewHelper(title: title))
    }
}

#Preview(traits: .navHelper("SwiftUI 滚动行为演示")) {
    ContentView()
}

#Preview("另一个视图", traits: .navHelper("另一个视图演示")) {
    Text("另一个测试视图！")
}

3. PreviewModifier 诞生之前我们如何向预览传送数据？

在 PreviewModifier 降临之前，倘若我们想要为视图传入预览测试数据，在某些场景下非得大费周章一番不可：

swift 复制代码

#Preview {
    @Previewable var clock = Clock.newCountClock(name: "大熊猫侯佩的计时器")
    
    let container = ModelContainer.preview
    try! container.mainContext.save(clock)
    
    return CountClockCell(clockID: clock.id).modelContainer(container)
}

如上代码所示：我们需要为所有使用 Clock 托管实例的预览视图"喋喋不休"的初始化测试数据。虽然使用 SwiftUI 6.0 新加入的 @Previewable 宏能够让实现简洁不少，但在每个预览视图之前都来上这么"一坨"代码，恐怕也绝非长久之计。毕竟，它严重违反了 DRY和 KISS原则。

关于 SwiftUI 6.0（Xcode 16）中预览新增 @Previewable 宏的使用，请小伙伴们移步如下链接观赏更详细的内容：

SwiftUI 6.0（Xcode 16）全新 @Entry 和 @Previewable 宏让开发妙趣横生

4. 用 PreviewModifier 注入（inject）预览模拟数据

现在，我们回到拥有 PreviewModifier 色彩斑斓的"新世界"中吧。

回忆一下之前 NavPreviewHelper 类型的实现：我们实际上完全忽略了 body 方法中的 context 参数（所以将其类型设置为 Void）。其实，这个 context 可以大有作为。

为了让 context 物尽其用，我们需要另外实现一个 makeSharedContext 方法，用它来注入测试模型数据。

现在，我们尝试将前一个需要 Clock 模型数据的预览改写为 PreviewModifier "助人为乐"的形式：

swift 复制代码

var clockID: UUID?
private struct MockClockData: PreviewModifier {
    static func makeSharedContext() throws -> ModelContainer {
        let container = ModelContainer.preview
        
        let clock = Clock.newCountClock(name: "大熊猫的计时器")
        clockID = clock.id
        try container.mainContext.save(clock)
        
        return container
    }

    func body(content: Content, context: ModelContainer) -> some View {
        content.modelContainer(context)
    }
}

extension PreviewTrait where T == Preview.ViewTraits {
    @available(watchOS 11.0, *)
    @MainActor static var sampleData: Self = .modifier(MockClockData())
}

@available(watchOS 11.0, *)
#Preview(traits: .mockClockData) {
    CountClockCell(clockID: clockID!)
}

从上面的代码可以看到，我们利用 makeSharedContext 方法在指定的 ModelContainer 中生成并保存了所需的测试数据，接下来在 Xcoce 预览中使用这些数据就是水到渠成的事情啦：

有了这位预览"好帮手"之后，我们现在可以为任何需要 Clock 托管数据的预览视图"套用" MockClockData "测试模版"啦，小伙伴们是不是觉得事倍功半，一步到位了呢？棒棒哒！💯

总结

在本篇博文中，我们介绍了如何使用 SwiftUI 6.0（Xcode 16）中最新的 PreviewModifier 协议让预览调试闲情逸致、如虎添翼。

感谢观赏，再会啦！😎