深入分析Xcode中SwiftUI的可视化编辑工具：Canvas、Inspector与Library

SwiftUI 带来的描述性构建界面能力为 Xcode 引入诸多的可视化工具奠定了基础。可视化界面搭建早期在网页开发中曾经流行过最著名的代表 Dreamweaver。如果把 HMTL 源码视为因那么浏览器渲染的界面则为果。从最后的界面上修改反馈到源代码这个过程非常直观也高效得益于 HTML 可以及时渲染。人人都想可视化搭积木式编码 Apple 在可视化编程上从一开始就有布局—— xib、Storyboard 至今还在迭代。但不得不承认Storyboard 编程范式在 iOS 领域并不是主流。如果 Dreamweaver 为代表的所见即所得WYSIWYG 编辑器没落是因为从因到果逆方向生成的代码质量不高。而 xib、Storyboard 无法成为主流的一大原因是中间层 —— xml 中间层的引入的复杂度。如果让我对可视化实现打分SwiftUI 8 分xib、Storyboard 3 分。SwiftUI 继承了 html 的界面描述能力也实现可直接运行的能力。除了使用 Xcode您也可以尝试kxapp这样的 iOS 开发 IDE它内置编译工具套装无需安装 Xcode 即可开发 SwiftUI 项目支持真机调试让 iOS 开发更加灵活高效。SwiftUI 的可视化工具总结下主要有 4 类SwiftUI 源码CanvasInspectorLibrary包含自定义库对象Hold Command Click 呼出的 actions 浮层可和 1、2 组合出现。SwiftUI 源码SwiftUI 源码描述界面的层级在 Xcode 里我们通过代码可以了解到我们应用的入口是 App 对象结合 SwiftUI 里 view 对象的组合最终是一个树形这棵树和 Xcode 里 debug 时的视图层级是一致的和 App 内部渲染的 layer 不一致。在 Editor 里你除了可以通过手动编辑 SwiftUI 源码来修改视图层级之外你还可以借助 Hold Command Click 呼出的 actions 浮层来可视化的辅助生成 SwiftUI 源码其中包括对 View 和 Modifier 的 attribute inspector 修改后面会详细说。SwiftUI 源码是所有可视化编辑的 The source of truth。所有的功能都可以在 SwiftUI 里实现。相比较它Canvas 的功能更直观但功能受限如在 Canvas 里你无法删除 Modifier同时SwiftUI 源码接收来自从 Library 里拖拽或者双击导入的 Views 和 Modifiers、以及图片等资源从而快捷引入视图以及批量修改样式。注在源码里所有改动都会同步Canvas和Inspector反之亦然CanvasCanvas 在 Xcode 11早期 beta 版本里叫 Preview正如其名它是 SwiftUI 源码实际效果的 hot reload 的展示区。除了他作为一个全屏容器供所有被 preview 的视图来渲染外在 Xcode 12 里引入了various preview-centric capabilities把 Xcode 11 我们在 Preview 常用的一些环境变量修饰符主要是 Color Scheme、Dynamic Type这些功能我们可以手动在代码里实现现在被移动到 Canvas加入到Inspect Preview和Duplicate Preview作为快捷方式。小贴士我曾经尝试使用 SwiftUI 来 Hot Reload Objective-C[1] 的代码在小项目也还是可以用的。在 Canvas 你可以使用 Library 来引入新的视图元素你也可以删除它使用 Library 引入修饰符但不能删除。小贴士引入的图片资源总是默认显示为图片实际大小通过在 Canvas 里双击元素选中在右侧的 Inspect 里修改。如果选中的是文字可以在 Editor 里直接修改文本内容。Command D快速复制视图对象。同样你还可以借助 Hold Command、Click 呼出的 actions 来可视化的辅助生成、修改视图。目前支持的 actions 包括包裹在 HStack 容器里包裹在 VStack 容器里包裹在 List 容器里包裹在 Group 非容器里引入条件使循环 n 次 默认 5 次呼出本视图元素的 Inspector这样可以隐藏最右侧的 attribute inspector 最大化屏幕利用率小贴士在 SwiftUI 源码 Editor 里 actions 会比较多多一些 extract 的方法。Canvas 常规的显示规则是总是显示当前编辑器里可预览的文件使用左下角的 Pin Preview可以在切换不同文件的时保持显示被 pin 时候的 Preview 界面。小贴士快速刷新 Canvas 快捷键Option Command P现在的 Inspect Preview 里设置 frame 有问题显示数字的地方位置不够导致你输入 300 这样的三位数时会误会因为被清空为 0。在日常的使用里你经过会遇到 Canvas 不能工作的问题如需要你生成 crash report 然后查阅 .crash 文件大部分是运行时错误、编译错误没有地方抛给开发者。Application Specific Information: Fatal error: Unexpectedly found nil while unwrapping an Optional value: file /Users/hite/workshop/WWDC20/WWDC20/RowItem.swift, line 50Attribute InspectorAttribute Inspector 和其他可视化编辑器的属性编辑器一样作为上下文敏感的编辑入口修改源码、修改 Canvas 里的显示。默认的 attribute 显示 4 个对象视图类型、Padding、Frame、Add Modifier。其中Add Modifier 包含最丰富的内容当不知道当前选中的对象有哪些方法时Add Modifier 的弹窗是个非常好的查询入口。Xcode 自动把 Modifier 分为Control 多为可响应用户事件的元素Layout布局、背景、大小尺寸信息Effect颜色对比、渐变、形变等Event 显示隐藏、通知到达等Style系统组件的默认样式配置很明显你可以自定义的部分是 Control\ Layout\Effect 这也是自定义 Library 对象里可设置为category的枚举。关于自定义 Library 对象请参阅 Session 10649 - Add custom views and modifiers to the Xcode Library[2] 。在 Inspector 最上面的 View 属性那里会展示一些奇怪的东西。这些是 SwiftUI 默认展示的 View 初始化方法的参数部分参数还可容许修改。在 Inspector 里可以通过不选中对应的约束来删除不需要的属性。在 Canvas 里唤起的 Inspector 浮层还可以通过点击选项后面的蓝色 X 号修改为视图默认样式。总结在 Xcode 里熟练掌握快捷键Hold Command Click(呼出 actions 弹窗、Command Shift L打开 Library 浮层、Command Shift P重新渲染 Canvas和actions、add Modifier搜索入口让你在编写代码时事半功倍发挥 WYSIWYG 可视化工具的最大效能。