小组件编程临摹课程 1：开始学习

（大家好 WWDC 2020）

大家好 欢迎来到 WWDC

（小组件“边看边写”第一节） 嗨 我是 Izzy iOS 系统体验团队的工程师 谢谢你们观看这个讲座 先简介一下今天要讲的内容 这种形式的讲座叫“边看边写” 是 WWDC 2020 的新环节 我们会介绍它的含义 以及你们如何参与 我们会介绍小组件的核心概念 然后一起构建我们的第一个小组件 我很兴奋 我们开始吧 （“边看边写”） 这个环节叫“边看边写” 在开发者门户上有一个项目 我们可以从零开始 一起为它构建一个小组件 我现在就邀请你下载它 与此同时 我们会讲几个概念 小组件核心是什么？

小组件就是一个 SwiftUI 视图 是能在 iOS、iPadOS、macOS 上 生成相应原生视图的同一段声明式代码

这个 SwiftUI 视图能不断更新 具体如何、何时更新 我们会在此次“边看边写”中见识到

这是下载好的项目

这是第一节“边看边写” 我们打开项目

在进入小组件之前 我们先构建并运行它 看看具体情况 （成功构建）

（角色 Power Panda Spouty、Egghead） 这是 Emoji Rangers app 它能让我们追踪 自己最爱的 Emoji Ranger 你能看到我们有 Power Panda Spouty、Egghead 我们看看它们的详情 （关于 Power Panda） 我们能看到我们的 Emoji Ranger 在保护世界免受一次次攻击 Power Panda 正在充电 但应该很快就好

我看了主题演讲 以及“迎来 WidgetKit” 视频 我真希望此 app 能有小组件 看起来我们已经有了完美视图 左上方的状态区域看起来 非常适合添加小组件 那我们就建一个

我们先看看这个视图的代码

这是我们 SwiftUI 的 AvatarView 如果你刚接触 SwiftUI 小组件是入门的好地方 你可以看到 我们只用几行代码 就能生成想要的小组件 因为我们在语义上表达叠放布局 SwiftUI 知道如何为我们设置正确的填充 你也会注意到 右侧有一个 SwiftUI 预览 它会随着我们编程实时更新 这看起来已经像个小组件了 我们让它成真 首先我们要创建一个小组件目标 一步步选择“文件-新建-目标” 然后搜寻“小组件”

给它命名为“EmojiRanger Widget”

点击“完成”

激活我们的目标

现在目标已建好 我们想把之前的视图添加进来 那我就把想要的文件添加到目标里

SwiftUI 预览也适用于小组件 我们看一下

点击“创建预览” 就自动为我们插入预览 我们可以使用 AvatarView

为了看到小组件到底什么样 我们将 WidgetPreviewContext 用作 previewContext 的函数

看起来不错 我们几乎已经建成了小组件 只需填些信息来完成它

DisplayName 和 Description 很容易填写

（Emoji Ranger 详情）

（追踪你最爱的 Emoji Ranger）

现在来看看我们的主 EntryView

即 EmojiRangerWidgetEntryView 我们来使用之前预览过的 AvatarView

它想让我继承一个角色 那这个角色来自于哪里？ EmojiRangerWidgetEntryView 内 已经有一个条目 所以就在条目那里添加角色

现在我的 AvatarView 可直接继承它

但这个条目来自哪里？ 条目来自小组件的核心引擎 即时间轴提供者

如果 WidgetKit 只想要 比如小组件库中的一个条目 时间轴提供者就能提供快照 如果用户往设备上 添加配置好的小组件 它就能提供完整时间轴 对于这个快照 我们只需传递角色

我们在这里传递角色

当用户从库里添加小组件时 就会启用时间轴 我们现在不需要完整时间轴 所以我们还是只使用一个条目

好 咱们构建并运行一下 看看情况如何

我构建了小组件目标 它自动将这个小组件添加到我的主屏幕上 我们现在有了完整的小组件 但我注意到一些想微调的地方 首先 在“添加”列表中 （Emoji Ranger 详情） 我们的小组件有小、中、大三个尺寸 这些都可以 但并没最好地利用空间 而且我还没准备好支持它们 那我们就设置支持族

在我们的小组件配置中 添加一个额外的修饰符

你们可能也注意到了 我们的模板中还有 PlaceholderView 我们的小组件太快了 以至我们无法看清它 但这显示了 WidgetKit 在时间轴上等待时会出现什么 我们想让它成为我们的 AvatarView 我们用 SwiftUI 预览看看它是什么样的

让它成为我们的 AvatarView

PlaceholderView 没有条目 所以可以再次传递给 Panda

在预览部分

我们可以把它改为群

里面添上 PlaceholderView

现在我们有两个一样的视图 但我们想让占位符表示待定的内容 而不是实际的内容 一个新的 SwiftUI API 能很容易实现这点 就是 isPlaceholder 修饰符

现在你可以看到 我们有完整小组件和占位符两个预览版本 后者文字自动被灰色圆形和长方形取代 图片也自动被取代

很好

我们最后再看一眼我们的新小组件

这是我们的 Emoji Rangers app

现在当我进到小组件库 我就能看到支持的唯一尺寸 然后把它添加到主屏幕上 完美 （后续步骤） 想了解如何进行小组件设计 请观看“设计优秀的小组件”讲座 我的同事 Nils 会讲解 如何最大程度利用 SwiftUI 和小组件达成设计 我也希望你们观看 我讲的下一节“边看边写” 谢谢你们观看 祝你们有个美好的 WWDC 体验