E872e5f639dee6ee431d9ffe48281739
WWDC20 10149 打造更容易 Preview 的 SwiftUI 应用

Structure your app for SwiftUI previews

简介

在开发中使用 SwiftUI Preview 功能,帮助我们开发更灵活、可维护、易懂的 Apps。 本文将介绍一些小技巧,改进提升项目工程的 Preview 体验。如,如何一次性 Preview 多个文件;如何管理数据流;如何使用样例代码提升 Preview 效率。
本文将介绍一些方法,分析数据模型,帮助你定义视图的输入,让这些视图更易可视化编辑、更具有可测性。阅读本文需要你已经熟悉 SwiftUI和 SwiftUI Preview(可参考阅读 "Visually Edit SwiftUI Views" from WWDC20

大纲


SwiftUI Preview

样例

本文对应 Session 的 sample code,官方没有放出来,所以我准备以电商 App 最常见的商品列表为例演示, 代码 git 地址。视觉稿如下(注意是视觉稿哦)。

视觉稿里不同商品的名称长度、营销 tag、颜色会影响行高布局,注意处理数据多样性带来的布局差异。

面向 Preview 开发的 4 个方法策略

1. 如何一次性预览多种效果

我们以修改商品描述(如“随心叠放 方便存储”)的文字颜色为例。视觉要求我们需要支持暗黑模式下的显示,所以我们希望能看到相同的数据在普通模式和在暗黑模式的渲染效果。这时候我们需要第一个技巧——如何同时预览一个 View 的多种情况。答案是 Group

struct ProductItemView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            ProductItemView(item: Products[1]).previewLayout(.sizeThatFits).frame(width: 170, height: 280)
            ProductItemView(item: Products[1])
                .preferredColorScheme(.dark)
                .previewLayout(.sizeThatFits)
                .frame(width: 170, height: 280)
            ProductItemView(item: Products[1])
                .environment(\.colorScheme, .dark)
                .previewLayout(.sizeThatFits)
                .frame(width: 170, height: 280)
        }
    }
}

Preview 里我们增加了 3 组效果对比,普通模式和黑暗模式的不同效果展示。

哇。我们从中发现,我们的的暗黑模式下显示有问题,需要改改 “descBackground”在 dark Appearance 下的色值,如果在修改颜色的时候,还能看到修改后在商品视图的样子就好了,如何做到?
使用 Canvas 的 pin (左下角大头针的图标) 。修改步骤;

  • 在预览 ProductItemView 文件时,点击 pin
  • 切换到 Assets.xsassets 文件,选择descBackground的 Dark Appearance
  • 选择右侧 Attributes Inspector,
  • 最下面有个 Color 的区域,我们切换 Input Method8-bit HexaDecimal ,修改 hex = #333333(正式项目里,配色是视觉同学出的,这里我随手写了一个)。

这时候需要点击 Canvas 的 Resume 按钮,之后就能看到效果了——看起来不错。

商品图下面的价格和促销标签颜色,如法炮制。

题外话:
设置暗色模式有两种方式;

  1. Xcode 11 里的语法,使用 environment 里的 ColorScheme 来实现
  2. Xcdoe 12 新提供的.preferredColorScheme(.dark)
    我认为 2 是 1 的封装,但实际效果看起来是不一样的,不知道是不是 bug。

总结下
我们学习了如何使用 Pin,利用 Pin 可以让你在修改代码、资源的时候,不丢失它的上下文,以便观察其是否修改正确,所见即所得-提高修改的效率;如何修改 AccentColor 等资源;善用 Group,我们可以查看不同情况下,相同 View 的表现,如

  1. 不同数据,如本例里的,分别传入所有商品的 item1、item2,观察显示效果
  2. 观察不同环境变量下的表现,常见的环境变量,DeviceLayoutColor SchemeDynamic Type等,无论通过 Attribute Inspector 还是在 View 上使用修饰代码。

最后通过 1,2 多种方式的组合,实现覆盖面更广的测试方式。值的一提的时,Xcode 12 里,你可以同时在多个真机和模拟器之间,同步的测试代码修改的效果——如同 Flutter 的 Hot Reload 那样。

SwiftUI App 的生命周期

使用 @StateObject 包裹属性,标记那些只会在第一使用 View Struct 时才会初始化,之后一直会保留第一次初始化的数据。使用很简单;
以 Session 的例子为例

@main 
Struct MosaicApp: App {
    @StateObjcet var model = NetworkModel()
    var body: some Scene {
        return WindowGroup {
            ContentView(model: model)
       }
    }
}

@StateObject 设计是为了解决 Struct 这种轻量级元素用完即丢的特性,导致数据也会丢掉的问题。如何设计数据的流动,请参看 Session Data Essentials in SwiftUIApp Essentials in SwiftUI
,需要结合整个 App 的情况,确定哪些数据是只需要初始化一次的,本文就不展开,私认为 @StateObject 设计不够优雅,是为了解决 SwiftUI 世界里一切 View 皆平等 其实不够灵活而打的补丁,这里就不展开了。

小结
把那些耗时、不会变化的数据获取逻辑使用 @StateObject 来提高性能。如果我们的数据不会在 View 视图内部初始化,如何更好的 Preivew 呢?

使用样例数据

一种方案——样例数据。Group,我们构造不同配置的样例数据,可以实现充分、完整的单元测试方案
使用样例数据,需要回答两个问题;

  1. 样例数据保存在哪儿?样例数据包括了,Swift 源文件、图片资源、其他资源等
  2. SwiftUI 视图如何引入这些样例数据?

第一个问题,样例数据保存在哪儿?
从 Xcode 11 开始,就提供了 Development Assets(位置:Target - General - 下面的 Development),让你把开发阶段使用的文件、文件夹、资源添加到这里,这些文件不会在 release 包里出现。Xcode 12 中,创建 SwiftUI app 模板工程创建时,已经默认创建了 Preview Content 文件夹,保存 Preview 时需要的资源。

小贴士:如果是 SwiftUI 创建的 Framework,里面也可以包含 Preview Content。

第二个问题,如何引入样例数据
独特的 App 用户体验来自独特的数据模型。无论我们面对的数据模型有多复杂,日常用户使用的 App 都在和一些简单的数据类型打交道,如字符串、布尔值等。那么问题来了,我们应该在多层视图层级的哪一层次,将“独特的数据模型”转为为用户日常使用的“简单数据类型”呢?作为一个经验法则, 这个转换越早、我们的 App 越好。越容易 Preview 多种配置下的 App ,我们的 App 会越好。

下面我们看 4 个例子来讲解如何构建更容易 Preview 的 SwiftUI 视图。

4 个例子

top Created with Sketch.