在 Xcode 11 中进行调试

（Xcode 11调试） 大家好 欢迎参加 Xcode 11调试 我是Chris Miles 是Xcode团队的工程经理之一 今天非常开心能来这里 我有很多内容要讲 那我就开门见山吧 从设备状况和环境重写 开始介绍吧

当你的app在实际使用中 并未如期运行时 你可能已经从用户那获取到了报告 他们报告的状况 可能很难在你的开发环境中复现 比如现实生活中的网络状况 现实生活中网络响应 并不如我们在家或办公室 创建app时那么的理想 如果用户在有限的网络连接中 使用你的app 出现了一个问题向你报告了 你需要复现一个 可靠的网络类型的状况 来调试和提升你的app

或是 当设备在现实状况中 处于热压力时 需要控制你app的资源访问量 来降低设备的温度 你需要了解你的app在这类热压力 的状况下的表现 对于那些大量使用资源的app 在设备处于热压力时 你可能要主动地通过减少资源量来 改变热压力的状态 但为了调试和理清你的逻辑 你要如何让你的设备处于 热压力的状态呢？ 这时就可以使用设备状况 这是Xcode 11的新功能 你可以使用新的热压力状态 来安全可靠地升高设备的热压力 到任意级别 一般 严重或是非常严重 你可以使用它来了解你app 的行为表现 在这些热压力的状态下 调试和确认你处理这些热压力 状态的改变 只需注意设备本身并不会 在物理上变热 所以不要在天冷的时候 尝试使用这个功能

同热压力状态一起 我们也引入了网络连接状态 这允许你的Xcode所处的 那台设备上 直接模拟现实生活中的网络状态 比如一个高延时 低带宽 高数据包丢失 慢的DNS

所以你能在多种网络状态下 使用它来了解 和调试你app的行为表现 现在 这个功能和 你们中的一些人可能已经 非常熟悉的iOS开发者设置 网络连接状态器很类似 但我们为它更新了一个更广泛 的现代网络配置文件 它完全能被Xcode控制 我马上会为你展示它是如何工作的

现在 用户控制了一些 app必须适配的状况 用户可以自定义他们界面的 可控制设置有很多 比如一个app运行时 浅色和深色界面样式 在iOS 13中 你的app在 浅色和深色 模式中必须提供一个好的用户体验

一个动态的高度客制化的设置

用户可以从非常动态的尺寸 到非常大的类型大小 之间选择 在辅助功能设置中还有更大的 尺寸可以选择 所以你需要调试你的UI样式 在一个范围非常大的动态 类型设置中

辅助功能也有很多选项 许多系统控制已经 适配了这些设置 但当这些设置生效时 你要确保你自定义 的视图和控制器也能正常运转 就像你在这里看到的 用户可以设置的环境配置有很多 你会在这些设置下 调试和测试你app吗？ 你甚至还记得去哪里找到 这些设置吗？ 这就是环境重写能帮你做到的 它允许你轻松地重写这些设置的组合 当你使用Xcode 直接调试你的app时

我们来快速了解一下 设备状态和环境重写 但我想向你展示它们是如何工作的 我会在Xcode中为你展示

我用Xcode打开了 这个Travel项目 这是一个允许用户发现旅行目的地 创建一个旅行计划和 记录一段旅程的一个iOS app 你可能在这周其他的一些演讲中 见过它 我集中注意力在这个美丽的 有着图钉标注的目的地 的3D渲染地球这里 现在我想测试这个app的 热压力状态 那么我开始添加代码来 观察这台设备上热压力状态的改变 我想减少使用GPU资源 当设备处于热压力下时 那么 我来向你展示我是如何 实现的 我将切换到这个 GlobeSceneController 这个控制器被用来配置3D场景 在这个注册器中 你能看到我为 thermalStatedidChangeNotification 添加了一个观察者 当设备的热压力状态改变时 它会被调用 在回调中 我们调用 configureSceneFeatures 那么我们来看一下这个功能 它负责我们3D场景的两个参数 反锯齿模式和请求帧率 当它被调用时 我们能获取到设备 的热压力状态 当设备处于非常严重的热压力状态时 我们推荐尽可能减少耗能大 的资源的使用 来为设备降温 在当前情况下 我会关闭反锯齿模式 同时将我们的帧率降到30 当处于严重热压力状态时 我们无需像刚才那么激进 所以我们只用关掉反锯齿模式 但帧率保持和之前一样 在较低的热压力状态下时 我们无需在当前的场景中 做出特别的更改 那么改完之后 我停止下来 再运行一下 我使用旁边的一个设备 我会使用右边的 QuickTime player 投屏到这个桌面上

现在 我想要将这台设备设置为 非常严重的热压力状态 这样我们就能测试逻辑和调试它 是否会出现任何问题 我也可以使用新的设备状态 但在我开始之前 我也想要监控 设备的热压力状态 我现在切换至调试导航栏 选择能源损失测量仪来实现 这个测量仪为你展示了一个平均 能源损失分类 和右上方的成分使用率 当我使用这个app时 你能看到 GPU是主要的使用成分 就像我们想的那样 但请你留意中间这里 在Xcode 11中 我们有了新的热压力状态跟踪 它为你展示了两个部分的信息 上面的追踪信息显示了设备状态是 活跃的 现在还没有设备状态 下面的部分展示了设备的当前 热压力状态 蓝色表示正常的热压力状态 所有组件温度都正常 运行平稳 那我们保持它运行 同时我使用窗口菜单来打 开设备视窗

我把它挪到上面 现在 设备被选中 我们滚到底部 找到新的设备状态UI 这里我们看到了这台设备的 所有的设备状态都处于可用状态 我们有网络连接状态 和所有的新配置 在我们的使用场景中 我们选择热压力状态 我们可以选择热压力状态级别 我会选择非常严 点击开始 现在 这里有几件事需要留意 一个是它要等几分钟 来让设备过渡到非常严重 的热压力状态 底下这里的热压力跟踪 我们看到了设备状态现在被激活后 的确认 过了一会儿 你能看到设备过渡到了非常严重的 热压力状态 设备的右边这里 注意上面有一个实时的背景过滤 那就是你的状态栏指示器 表示一条设备状态在这个设备 上被激活了 最后 如果我们与我们的3D场景 产生互动 我们能看到我们添加的帧率指示器 展示的是30帧每秒 这样我们就能非常简单的确认 我们的逻辑没错 抗锯齿也处于关闭状态 在这台小设备上有点难看清 但在一台大设备上你可以看到 那么 现在我们已经使用了 设备状态来验证我们的代码 我们可以关掉它了 我点击这里的停止按钮 但这里还有一些其他的方式来 禁用设备状态 一个是在Xcode上断开 设备的连接或退出Xcode 如果设备始终与Xcode断开 它会自动地关闭一个设备状态 因为我们不希望你的设备 在这些状态下运行 当你不处于开发模式中时 另一个是设备本身 我们可以点击上面的状态栏指示器 现在我来点它 我们看到了 关于当前活跃状态的信息 我可以点击停止按钮来关闭状态 我现在来点 我们能关闭设备窗口 在热压力状态追踪这里 我们看到设备状态 不再处于活跃状态的确认 我们看到设备开始过渡回之前 的状态 回落到一般热压力的状态 和正常的热压力状态

这就是使用设备状态的 一个快速的展示 在这种使用案例中 热压力状态 在我们连接的设备上 现在 我想继续向你介绍环境重写 现在我将停止运行 切换到一个特别的视图 我将选择个人档案视图 它是用SwiftUI创建的 我真的很想写SwiftUI 以及使用新的Xcode预览 我将打来画布来启动预览引擎 现在 我不再需要这台设备了 那么我关掉QuickTime

预览开始运行了 现在 使用环境重写 你需要调试你的app或 调试你的预览图 如果你还没看到 你可以调试预览图 点击底部右边的这个运行按钮 你会看到一个弹窗菜单 你只需选择调试预览图 它做了两件事 它让预览图进入了运行模式 它也打开了一个调试会话 那么 现在预览图处于运行中 并可以使用了

我们来到底部 我将它提高一点 在调试栏中 我们看到我们收到确认了 我们有一个活跃状态的调试会话 在预览图调试 我们有了所有常用的调试工具 比如视图调试 内存移植调试 和新的环境重写 那么 如果我点击它 我们看到了环境重写的UI 我们可以简单地重写用户界面样式 通过点击切换 现在我们将预览图设为深色模式 我们可以在浅色和深色模式中 来回切换 来测试我们的布局和我们的UI 那么 你可能已经留意到了一个问题 这里的描述文字在浅色模式下 没有问题 但在深色模式中 我们看不到它了 那么 我们在这里快速看一下 我光标下的这个文字元素负责 绘制描述 你可以看到我还没过渡到这个视图 来利用深色模式的优势 我还在使用一个固定的颜色 我应该使用一个具有语义的颜色 如secondary 我来改变它 我喜欢预览图的一点是 它会自动为我刷新 因为我们请求了调试 我们还有一个调试会话 那么我来使用环境重写 查看深色模式 我们修复了问题 非常简单

我们来试着使用动态类型的重写 我切换到文字重写 我使用这个滑动条 来选择这些动态类型设置中 任意一个调节至非常小

到非常大 接下来 我们来看看无障碍尺寸 一直到非常大的无障碍动态 尺寸类型设置尺寸 注意我们的布局在当前使用案例中 看上去很棒 特别是这里 点击这些小的矩形到 非常大的类型尺寸 那么 我们在这里 顺便也修复这个问题 我向下滚动至 ImageTextPill 是视图用来绘制这些矩形的 它水平排列展示了一张图片 和一段文字 我想做的是当类型尺寸变得太大时 就切换至垂直布局 将它们上下布局 现在 我已经在其他地方 解决了这个问题 我创建了一个自定义的视图 叫做AdaptingStack 我现在随便点击一个打开

这种场景中我们不需要画布 那么我关掉它 那么我们在另一个编辑器中打来它 我们来快速看一下 一个AdaptingStack 是一个自定义视图 它将一个视图创建器的闭包 作为一个输入 就像一个H布局或一个V布局 所做的一样 它为它自己绑定了 sizeCategory环境 所以当一个尺寸类别改变时 就在你动态改变我们的主体层级时 接下来 如果我们切换至尺寸类别 如果它的无障碍放大效果 越来越大 接下来我们将内容放置到一个 垂直排列堆栈中 调节一下边距 或者 我们把它放置到一个 水平排列堆栈中 那么 我们来试一下 我会改变这个HStack至 一个adaptingStack

我们的预览视图刷新了 现在我们尝试环境重写 我们扩大到大的尺寸 我们能看到我们的布局适配了

看到这个变化我很开心 我们来快速看一下无障碍设置 你能看到这里有很多设置 我们今天没有时间来试 所有的功能 但我非常鼓励你在你的app和 预览图中试用所有的这些设置 保证你的UI在启用这些设置时能 正常运行 谢谢

那么我来为你快速总结一下 我今天的介绍 首先 我们来看设备状态 在设备视窗上可用 它允许你启用一个网络连接状态 或是一个热压力状态 设备状态和Xcode设备 连接绑在一起 所以如果设备从Xcode断开链接 我们会自动地断开设备状态 一个iOS状态栏指示器 为你提供一台设备的活跃状态 的指示状态 你可以点击指示器来查看 关于状态的细节 使用它来停止状态

环境重写可以在调试中使用 你可以使用立即重写 你看到的许多设置 它只会影响你调试的app 它不会影响其他一些 正在运行的进程 最重要的是 它不会改变 任何系统设置 所以 它使用起来非常方便 它支持任何使用场景下的 设备 模拟器或你之前看到的调试 它支持我们所有的平台 有些设置可能不一样 但它适用于所有你能调试的平台

所以 我希望你能利用好这些新功能 在更宽广的状况和环境范围中 开发和测试你的app 所以你能为更多用户在更多的使用 条件下创建一个更好的用户体验 谢谢 我将邀请Han Ming 来为大家继续介绍 他会为你带来更多关于调试实时 预览图的细节介绍

谢谢Chris

早上好

在过去的几天里 我们了解了 实时预览是测试你项目中一个 特别视图之间的交互很好的方式 Xcode也优化提升了编辑 你的源代码 和更新预览视图之间最快的运转时间 但我们中的一些人 不 我们大家都是普通人 我们一定会在代码中引入一个问题 所以Xcode为开发者提供了一个 预览视图来 发现这些问题

当调试工具被附加时 你可以利用所有这里的工具 比如调试导航栏 你可以用它测试栈回溯

打断点 你可以用它来暂停调试器

调试栏 你可以搜索你的进程控制按钮 比如分步控制 以及变量视图 你可以监测进程暂停时的状态

Xcode 11的新功能 它会为你展示 SwiftUI运行时的问题

现在这是一个新的由系统框架 产生的一类新问题 它通常和它们的API没有被 正确使用时关联在一起

Xcode会在进程运行时找到它们 我们现在有几个框架正在参与开发 因为SwiftUI是一个全新的 从一开始就为你设计来发现问题的

这些问题不会阻断你的进程 但它们会为你展示你想要修复的 重要的问题 在你的app发布至 App Store之前 为了吸引你的注意 它们会在 Xcode中非常明显地展示出来 它们会在活跃视图查看器中 以紫色图标显示出来 在问题导航栏中会有更多的细节 信息

除了预览视图 所有的平台都可以 查看这些问题 和运行目的地 我们直接用一个示例来了解更多

好的 这个我们创建的项目 这个画布开始为你展示静态视图

这个预览图会在右侧展示温度 当数据加载完成时

但在这之前 它会展示自旋体 自旋体的显示

由一个状态值itsloading 所控制

Itsloading在数据载入 完成时 变为false

那时自旋体就会消失 相当简单的逻辑

为了获取实时预览图 Chris提到过的 你点击播放按钮 来获取调试器 你可以按Control键并点击 来得到上下文菜单 选择调试预览图

现在 我的QA工程师告诉我她发现 了一个问题 就是这个自旋体不会消失 那么请你留意 当我的调试会话运行时

Xcode现会重新编译这个特别的 带有调试信息的Swift文件 启动一个新的预览视图 你知道调试器是由两种方式固定住的 首先 你可以到调试导航栏 寻找它 或者你可以在调试栏中寻找 进程控制按钮

它就像我们的画布中有一个运行中 的调试会话 我们看到自旋体没有消失 她是对的 我们来解决这个问题

在调试器下面 我们看到 编辑器上展示了 一个新的运行问题 我们点击注释 它会为你展示一则消息 它表示 在视图更新时修正状态 这会导致未定义的行为问题 这非常难懂 那么我来解释一下

body属性 保留了一个等下会展示的 一个视图层级

这个框架会请求body属性 它是否需要更新视图 所以你无法控制何时或请求次数 因此没有上下文环境 绝对没有上下文环境提供给你 来决定如何改变状态值

幸运的是 可以将它的加载放在 一个更好的地方 就是weatherFetcher 的回调函数中

在第47行代码 那么 我将这段代码移到

第47行 但你会看到Xcode 注意到了源码的变动 它会自动地尝试加载 一个新的预览视图 那么 请你再次留意自旋体 如果我让它变得很慢的话

这是自旋体 数据被加载完成了 等一下 调试会话要进来 这是自旋体 它是获取到的数据 数据加载后自旋体消失 所以第一个问题解决了

为了停止调试会话 你要返回你开始时相同的地方 点击停止按钮

那么我勤劳的QA工程师告诉我 还有另一个问题时 这次它会展示一个不同的视图 它调用了一个普通的细节视图

那么我来展示它

我会在描述情况时获得调试会话

那么我在上面有了一个标头 这里的设计是为了增大一些 当我向下拉屏幕时 这会帮助像我一样的朋友们能看得 更清楚一些 那么 它看上去我们有一个调试会话 我们来试一下

它的确变大了 很好 在某个节点上它突然消失了 这一定就是她提到的问题

接下来我意识到 一个紫色的图标在活动视图器 出现了

所以 我会点击它 它应该能带我到问题导航栏 它显示 无法逆转奇异矩阵 对于我们每日使用CGAffine 变换的人来说 你一定知道这是什么意思 对于不知道的人 这是一个两小时的 高中线性代数的课程

我的一个数学博士朋友 在挥舞着他的拳头 但请不要 我们不要那么做 这是一个非常简单的解释 获取一个逆矩阵就和 做一些数学除法运算类似 数学除法 你们都知道的 有些值是不可能出现的 那么 我们来看一下为什么 但现在 你要注意 在问题导航栏上的另一个数据 由调试器产生的记录回溯 你展开它 你看到回溯 接下来 会有一个 你调试符号的框架 就是第一个框架 选择它 它会为你导航到接下来 几行代码中 就是问题产生的地方 但在当前情况下 了解在哪发生 并没有了解怎样和何时发生重要 我们通常要做的是在调试器中暂停 接下来你可以检查进程的状态 现在你可能已经知道我将要使用 的工具来定位这些问题了 是的 断点 我可以在第44行打一个文件断点

但你猜发生了什么？

当我下拉时我需要点这里很多次 所以这不是很有效率 我们不要这么做

我们来使用断点导航栏来代替

点击添加按钮

在Xcode 11我们引入了 一个新的断点 叫做运行时问题断点 我们添加它

我们保留这个目标系统框架

现在 在例子中 我想要介绍一些提示和技巧 会让你的工作流更有效率 这是另一个好例子 如果你曾想停止或重启 你的预览视图 你可以使用在编辑器菜单里 名字很恰当的刷新捷径 我们来试一下

那么我们有了一个新附着的 调试器预览视图 Xcode会一直记住你之前的配置 所以如果你使用调试器 调试器会附着在新的预览视图会话里 那么 我将会向下拉 如果我幸运的话 我会遇到断点 好了 Xcode方便地带入了变量视图

现在我们知道我们的 scaleTransform出错了 所以我会展开它来查看矩阵

M11是我们在X方向上的缩放值 我们不会对它进行任何操作 所以我们让它保持为常量1

M22是我们在Y方向上的缩放值 当这个值为0时 是无法通过数学公式获取到逆值的 对吧？ 是的 那么 我们现在知道了 导致问题的原因 我们来看一下代码 来看一下我是在哪里将值设为0的 将Y方向上的缩放值设为0的 它看上去像是这一行 现在修复它 我在这里也来让这段代码 更加简洁一点

哎呀

好的 我会关闭调试区域 好的 我现在来试一试

好了 它变大一点了 它固定住了 好的 第二个问题解决了 那就是我示例的结尾了

所以 当你调试实时预览视图时 和你平常调试时比较 有三件事情不相同 首先 你使用画布播放按钮的 上下文菜单 来启动你的调试会话 为了停止它 你点击相同的按钮

你们可以看到Xcode 自动地留意到了源码产生了变化 接下来尝试启动一个视图 你的一个新的视图 不管有或没有调试器 这都会发生 当有调试器时 会有一个新的调试会话 所以 如果你想要和和编辑器里的 相同文件 保持相同的调试会话 不要改变那份文件 查看一份不同的文件 使用一个不同的面板 一个不同的标签或一个不同的窗口 Sebastian马上会为你展示 工作流程

好的 从我的例子中 我们学习到 当你调试实时预览图时 你可以使用你以前习惯的 但现在更高效 所有的这些很棒的工具 你想要调整我们特别为 预览视图设计的工作流程 留意这些SwiftUI运行时 的错误 因为它们指出的是真正的问题 以及使用运行时问题断点 来帮你调试 我已经为你展示了几个调试的方法 但有时你只需要在视觉上处理它 有请Sebastian 来为大家介绍如何实现

谢谢Han Ming

我们确实会来看一下在一个 示例中调试SwiftUI视图层级 但在开始之前 我们来看一些SwiftUI 特别的地方 以及SwiftUI和传统UI框架 比如AppKit和UIKit的 关键的不同之处 以及了解那会如何影响你调试 的工作流程

首先 SwiftUI使用了 一个声明式的API 这意味着它会显示运行时 你自己的源码 而不是视图的初始化 你提供了一套你的视图层级 以及构造你视图的框架 在运行时保持它们的状态更新

SwiftUI包括了构成和 轻量级的修饰符 超过复杂视图类型 所以在运行时你可能看到的视图 可以观测到有许多少的属性

SwiftUI的视图是值的类型 那意味着调试工作流程 依赖参考的视图 可能不再合适了

再运行时 SwiftUI可能将 你代码中具体的视图 转换为特定平台 UIKit和AppKit的视图 我们等下会在例子中看到 它的一个示例

SwiftUI也将 UIKit或AppKit 已有的框架视图整合得非常好 你早些时候看到的travel app就已经使用了那个概念 来将一个UIKit视图混合 至SwiftUI视图 这是app中使用的主要视图

考虑到这些方面的同时 我们来切换至示例机器 了解下在这travel app中 检查我们个人信息 屏幕的视图层级

谢谢 我们再次调试travel app 的个人信息视图 我们在这里已经处于调试模式了 我再重新调整一下检查器

为了检查视图层级 我们可以使用Xcode的调试栏 下面的按钮 来调试视图层级 就像Han Ming之前提过的 我们必须确保我们在调试过程中 预览视图保持打开 因为调试会话和预览视图的 生命周期绑在一起 我们可以使用Xcode 11中 新的编辑器分屏功能来实现 按下option键的同时 在我们在Xcode调试栏中 点击调试视图层级按钮 它在一个单独的编辑器分屏中 打开视图调试画布 我们可以访问左上方的源码 预览视图在左下方 视图调试画布在右侧

谢谢

如果你之前使用过视图调试器 你会非常熟悉它 你有一个画布区域 在这里你能检查你所有的视图 你只需简单的旋转就可以分解它们 呈3D状态 这样你就能很好地预览你的视图 你可以选择元素 在右侧查看检查器属性 左边的导航栏 有一个你视图层级的缩略展示 这样你能自己定位 相关子视图和父视图

好的 那么 就像我之前提到过的 这个个人资料视图结合了UIKit 和SwiftUI 看一下实现 你可以看到它返回了一个垂直的栈 作为它的主体的一部分 它包含这里的头像视图控制器视图 那个视图从一个故事板文件 加载了一个UI视图控制器 在下面 它实例化了一个列表 那意味着这里上面的部分 是由UIKit创建的 下面的部分是使用SwiftUI 的一个列表来创建的

在第一部分的示例中 我想要 专注于视图层级的UIKit部分 接下来第二部分 我们会关注 SwiftUI部分

Xcode 11新支持了 UI窗口场景 它是在iOS 13的UIKit的 app中使用多窗口支持的概念 你可以看到所有的UI窗口现在 都罗列在自己的UI窗口视图下面 所以只要你在你的iOS app中 增加了多窗口的支持 寻找这些窗口场景会非常容易 当你在导航栏中选择一个 你也可以检查它们的属性 比如 在检查器中查看标题 和激活状态

iOS 13的另一个新功能是 深色模式 今年 我们采用了几种方法来 完善视图调试器 来帮你为你自己的app增加支持 首先 当你选择一个UI视图或UI 视图控制器时 我们现在在检查器中 为你展示了特征集合信息 比如用户界面样式 这样你就能保证 视图样式是我们期待的那样 当你为你视图层级中特定的 子元件重写用户界面样式时 你可以马上在视图调试器中调试它

深色模式的另一个关键点 是适配外观变化的动态颜色 使用资产目录和语义化颜色 来实现是一个好的方式 当我们选择这里的这个徽章 你能看到它用了一个语义化的颜色 来实现了橙色色调 来自资产目录的强调色 所以它现在非常容易确认一个 颜色是否来自资产目录里的 一个语义化颜色 它能动态地适配外观的改变 或是否是一个不能适配外观改变的 硬编码的颜色 另一个新功能是符号图片 这个徽章实际上使用了一张 符号图片 当我在这个检查器往上一点 你能看到检查器中 关于符号图片的细节 我们现在展示了你在选择器中选择的 所有图片的名字 你获取了比如符号配置的细节信息 看到了它实际上是一个系统 符号图片 和比如一个你在你的资产目录中 创建的自定义符号相比

符号图片由它们的基准线 这样它们 就能非常棒的一个接着一个布局 我们将这个基准线在右侧 的这个视图可视化展示了 来保证它在文本旁呈现良好的布局 我们必须在UIKit的世界 使用自动布局限制 来确保我们使用了基准线限制 而不是 比如将它们居中 因为如果这个名字变长的话 会导致一个换行 我们有一个多行标签 我们想要确保这个徽章 和第一行的这个标签对齐 我们能很容易地确认它 和被选择的徽章 我们可以切换至尺寸检查器 来看一下限制细节 我们在Xcode 11全面更新了 这个部分 让它更像是Interface Builder 且更强大 这样你的鼠标滑过它们时 就能高亮这些限制 你可以使用这里的 这个小的导航器 来过滤到一个特定的边缘 我们可以简单地确认 这个徽章实际上使用了它旁边标签的 第一个基准线限制 那么 这就是我们完全想要的 我们很简单地就实现了

好的 那么 这些是 我们在UIKit部分上所做的改进 我们切换至SwiftUI

就像我们看到的 我们现在看到的是 个人档案视图的预览图 看着左侧的导航栏 你能看到个人档案视图 在这里出现了 我们很好地明白了 它在画布区域的尺寸

我们看到它使用了一个垂直堆栈 我们在画布区域 也看到了选择它 你就能在右侧检查器获取 它的细节信息 切回个人档案视图 它有更多的属性 你可以看到那有很多关于 在检查器里出现的视图属性 我们已经使用Swift反射 自动地发现这些属性 那么 甚至是你自己自定义的视图 我们现在自动地在检查器中 展示了这些属性 它比之前的功能更强大了 之前我们只支持系统视图 我们甚至又近了一步 你现在可以自定义这些 出现在右侧检查器的属性了 通过在你视图类型中实现自定义 可反射协议 个人档案视图正在做它应该做的 你能看到它在这里 返回了3个不同的属性 账户状态、上次登录和个人档案 作为自定义Mirror的一部分

看右边的检查器 你能看到这些都是返回的 准确属性 所以这是非常强大的功能 让你在调试过程中 可以返回你需要的确切的数据

我们再看一下检查器 你能看到在上方 我们获取到了当前选中视图的属性 个人档案视图和更进一步 我们能看到当前所有的修饰符 都在被选中视图中生效了 那么我们能看到边距和 安全区域嵌入物 举个例子

我们看一下视图层级中的 另一个不同的部分 就像我们之前看到的那样 底部 使用了一个列表来为所有视图布局 那么我们选择我们看到的 其中的一个视图 比如 这里的965字符 我会使用一个导航的手势 来在调试导航器中展示 这样我们就能很好的了解 它在视图层级中的位置了 我们能看到SwiftUI已经将 这个列表转移 至一个底层的UI表格视图 它使用表格视图单元格来寄存 SwiftUI视图 我们在代码中构建过 这是一个实现的细节 你不应该在你的实现中依赖它 但它非常有用 比如 当你试着调试布局问题时

这个被选择的文字 这里实际上是有一个问题的 我们的设计师提过 它们应该对齐基准线

而不是在这两个文字之间 垂直地居中 现在 我们已经看到 这是一个水平的堆栈了 它将它们一个接一个布局 当我们在这里看它的实现 你能看到它是一个扁平的水平 的堆栈 它没有传递任何参数至它的 初始化方法 但当我们看这个检查器时 你能看到它其实默认偏移屏幕 对齐了 现在 我们不想要居中对齐 我们想要基准线对齐 所以 我们调整代码来 修复这个问题 我会关闭这个视图调试器 继续调试会话和再一次激活 预览视图

对于HStack 我会添加一个对齐参数 .firstTextBaseline 我们现在能看到两个标签 实际上沿基准线对齐了 那么我们--

我们可以看到HStack为它自己 的对齐方式设定的默认值 找到并修改它 接下来立刻使用Xcode 11的 新的预览视图验证它 这样 我会切回至幻灯片

我们刚才看到 当你检查 SwiftUI视图层级时 视图层级时在导航器出现了 在画布的左侧 以及属性和修饰符 在检查器右侧展现了

检查器属性会自动地查明使用 Swift反射 你甚至可以自定义检查器属性 使用自定义的可反射协议 来在右侧的检查器展示 当然 使用SwiftUI 我们也为混合视图层级提供支持 我们刚看到 UIKit视图怎样在SwiftUI 视图右侧旁边展现的

我们对UIKit视图也做了 很大的改善 即支持了 UIWindowScene

当你开始在你的UIKit app 适配多窗口视图时 它会为你提供帮助 我们改进了检查器 提供了更多细节 比如特征集合的细节 我们看到了语义化的 图片和符号图片信息 我们也看到了语义化颜色 当你开始适配在深色模式适配它时 它会很有帮助 我们对检查器中的约束条件的细节 做了很大的改善 它比之前更为强大 当你在UIKit app中调试 你的自动布局约束条件时

如果你想要了解更多设备状态的细节 我在这里推荐这个演讲 这里也有一个介绍LLDB和改善的 一个很棒的视频

这样 我们今天的演讲就要结束了 愿你能好好享受接下来的会议 我们盛典上见