小组件编程临摹课程 2：变更时间线

（你好 WWDC 2020）

你好 欢迎参加 WWDC （小组件“边看边写” 第二部分 交替时间线） （IZZY FRAIMOW， iOS 系统体验团队） 大家好 我是 Izzy iOS 系统体验团队的一名工程师 感谢观看本次视频 我们来看下今天的内容 我们会介绍小组件分类及其具体内容 如果你们之前设计过 watchOS 复杂功能 就会觉得比较熟悉 我们还会介绍时间线以及如何进行更新 此外 还会学习如何使用户能配置小组件 小组件如何在其 app 中链接到内容 最后 我们会更新 小组件来完成所有这些操作 听起来内容很多 不过 鉴于 SwiftUI 和 WidgetKit 的强大功能 每一步都真的非常简单明了 （小组件分类 时间线 配置 深度链接 更新我们的小组件） WidgetKit 提供了三个分类 systemSmall、systemMedium 和 systemLarge 如果你们之前设计过复杂功能 这些与复杂功能分类的概念一样

在第一部分中我们了解到 时间线提供器相当于小组件的引擎 我们从提供器中返回了一个项

但是我们本来可以返回许多个项 最大的问题是 最后发生了什么？ 我们如何提供更多的项？

答案就是我们选取一个 TimelineReloadPolicy 规则

第一个 atEnd 告诉 WidgetKit 在时间线的最后一个项显示时 开始安排更新

更新时 我们的时间线方法会被再次调用 这样我们就可以返回更多个项

类似地 after 告诉 WidgetKit 在指定时间开始安排更新 比如我们指定时间为晚上 10:00 那么 WidgetKit 会在晚上 10:00 安排更新 而这与其他项在时间线中的远近没有关系 最后一个选项是 never never 表示系统不会独立更新小组件 而是需要我们明确地告诉小组件 何时通过小组件中心 API 进行重载

注意 系统中可能 会有多条时间线同时处于活跃状态 每条时间线有不同的重载规则 为提供最佳的用户体验 以及尽可能在用户看到更新时 提供小组件更新 系统以智能化方式安排更新 也就是说 atEnd 和 after 代表小组件可以刷新的最早时间 小组件可在主屏幕直接配置 WidgetKit 配置由 SiriKit 驱动 这意味着只是单有配置 我们的小组件 即可符合条件作为智能系统行为 配置的核心技术是 INIntents 具体指自定义 intent

如需详细了解这些问题 请看今年 WWDC 有关配置和智能的 演讲视频 （启用小组件个性化和智能设置） 小组件并没有动画或自定义互动 但我们可以从小组件深度链接到 app

SystemSmall 小组件 是一个大的轻触区域 而 systemMedium 和 systemLarge 可以使用全新的 SwiftUI 链接 API 在小组件中创建可轻触区域 （边看边写） 接下来是“边看边写”部分 我们继续 上次视频中的小组件“边看边写”部分 因此 如果你一直都在跟进 那就没有走错地方 如果没有 也不用担心 你可以从范例项目中的 第二部分“目标”开始学习

我们本次视频讲的内容很多 所以我做了一个清单 （交替时间线） 我们从第二部分开始讲

在上次视频中 关于小组件 我们只讲了 systemSmall 我有个想法 可以更新它使其也支持中等尺寸的显示 下面开始吧

首先 我们需要更新支持的分类 我们需要支持 systemSmall 和 systemMedium

现在 我们需要了解 视图将在哪个分类中显示

WidgetKit 提供我们 可以使用的 widgetFamily 环境变量值

现在我们可以直接切换分类 决定返回哪一个视图

我们可以移动 AvatarView

好 现在我们为 systemSmall 返回相同的 AvatarView 对于另一种情况 我们会返回新的视图

这里我使用了一个代码片段 但这是我们之前使用的 AvatarView 在 HStack 中 旁边添加了文本 文本描述了我们的角色简介 为了看起来更有吸引力 我添加了一个背景色 好 我们继续配置 systemSmall 我喜欢使用这个小窍门 就是 embed in an HStack 但是我不太想用 HStack 我想要 ZStack 所以我们只需使用 embed in HStack 的快捷指令 然后改为 ZStack 用同样的方式添加一个背景色 既然有了背景色 我们也需要前景色

下面让我们看下预览效果

可以看到在预览中 我们返回 AvatarView 但是我们的项基于 widgetFamily 返回了两种不同的视图 因此 我们可以直接返回 Entry-View

Placeholder 和 primary 要同时更新

可以看到 PlaceholderView

正如我们的预览一样 总是返回 AvatarView 然而 我们想要它同样返回 EntryView

我们在预览中看一下

很好 现在是中等尺寸的视图了 同时 我们的预览自动更新了新内容 让我们开始构建并运行它 看一下实际是怎样的

（构建成功）

（角色 Power Panda、Spouty、Egghead) 这是我们喜欢的 Emoji Rangers app

现在当我进入小组件库时 我可以把小尺寸或中等尺寸的 小组件添加至我的主屏幕

（要移除 "Emoji Rangers" 吗？）

以上是有关分类的介绍 （交替时间线） 接下来我们讲一下时间线

正如之前提到的 WidgetKit 想要在系统中同时安排所有的 小组件更新 我们坐在这里要求重载 然而我们并不需要这么做 我们知道角色随着时间的推移会恢复 我们甚至知道完全恢复的具体时间 计时器可以告诉我们 我们需要做的就是 在角色恢复前生成一条完整的时间线 我们可以为时间线填充更多的项 比本来可以获取的还要多 这听起来很完美 我们开始吧

我使用了一个代码片段 希望你们能够跟上 所以在你们写代码的同时 我介绍一下所有的行 首先是 selectedCharacter 以及 endDate 时间 我们知道角色何时完全恢复 我们会每分钟提供一次更新 然后在 currentDate 时间开始

目前所有的项都是空的

currentDate 还没有到 endDate 因此 我们使用 currentDate 创建新的项 让 currentDate 时间往前一分钟 然后添加项 现在有一条完整的时间线 在这条时间线走完之前 WidgetKit 不会试图重载

之前我们讲过智能系统 其中一点就是 如果窗口小部件在 stack 中 系统会智能化地把它转到前端 我们可以提示系统 关于提高小组件优先级的具体时间 使用 relevance 可以做到 你们可能已经注意到 relevance 在时间线中是一个可选属性 好 我们继续 添加它

注意 relevance 值的范围是我们定义的 既然我们的角色已完全恢复 是最重要的状态 我们可以 直接使用健康水平作为我们的 relevance

我们可以 把 relevance 传递给这里的范例项

现在我们有一个 加入了 relevance 的完整时间线 以上是关于时间线的内容

现在 我们的小组件只显示 Power Panda 但是还有两位英雄 这就不公平了 因为他们俩也功不可没 下面我们把小组件显示哪位英雄 作为一个配置选项 我已经为这个项目 添加了一个 intent 定义 这里演示下你们如何从头添加 找到 “文件” 选择“新文件” 搜索 intent

然后添加一个 SiriKit Intent 定义文件

我已经添加 在这里就不重复了 但我们需要确认的是 我们的目标会员资格 同时包括小组件和 app

Intent 定义文件需要填的字段不多

因为小组件显示信息 我们的分类是信息查看模式 标题和描述是自定义的 我们需要确保选中这个复选框 以使 intent 符合小组件的条件 （Intent 符合小组件的条件） Intent 有一个叫“hero”的参数 这个参数是枚举类型 我们可以在枚举编辑器中设置 提供哪些枚举 这里我已经添加了 Panda 和 Egghead 不过我们也需要添加 Spouty

至此 我的 intent 定义就完成了

那么如何 让小组件使用我们的 intent 定义呢

回到我们的小组件

我们需要更改小组件类型

把静态配置改为 intent 配置

这需要一个额外参数 下面我通过构建让 Xcode 告诉我这个参数具体是什么

然后应用结果

我们可以使用 CharacterSelectionIntent

Intent 配置需要 一个匹配的 intent 时间线提供器 回到最上面 我们可以更改时间线提供器 改为 intent 时间线提供器

Intent 时间线提供器传递一个额外参数 给 snapshot 和时间线方法

这是相关的配置 把它添加至 snapshot 和时间线

现在我们只需要从配置到角色的路径

注意 这些枚举值看起来一样 但一个是来自 intent 定义 一个是角色详情定义 现在我们只需要为 intent 的角色 设置选中角色

下面我们构建并运行它 看一下实际是怎样的

（构建成功） （角色 Power Panda、Spouty、Egghead)

当我从图库中选择 Emoji Rangers 小组件时 默认显示是 Power Panda

不过 当我长按时 出现了“编辑小组件”选项 轻触后 小组件翻转 我可以在 Power Panda Egghead 和 Spouty 之间进行选择

我想要 Spouty 出现在我的主屏幕 以上是关于配置的内容

这非常酷 但是我想直接跳到角色详情页 既然我可以选择具体显示哪个角色 那做到这一点也是超级简单 为查看模式 添加一个 widgetURL modifier

systemSmall 和 systemMedium 视图同时添加

现在 构建并运行 （构建成功） （角色 Power Panda、Spouty、Egghead)

添加 Emoji Ranger 小组件

轻触它 直接进入 Power Panda 的详情页

如果我选最喜欢的 Ranger （编辑小组件 英雄 Spouty）

（关于 Spouty） 那么就会看到相对应的信息 非常棒 至此 我们构建了一个功能完整的小组件 它支持多个分类 有完整的时间线 支持用户配置 以及深度链接至 host app “边看边写”还有一段视频 希望你们能够观看 （小组件“边看边写” 第三部分：推进时间线） 有关小组件设计的深入讲解 请观看 《设计优秀小组件》的演讲视频 我的队友 Nils 介绍了如何充分利用 SwiftUI 和小组件 真正掌握那些设计 （为小组件构建 SwiftUI 视图） 感谢大家 希望你们喜欢 WWDC