为你介绍 WidgetKit

Meet WidgetKit：将 app 最有用的信息直接显示在主屏幕的最佳方法。我们将向你展示一个优秀小组件的必备要素，并介绍 WidgetKit 的特点和功能。了解如何创建窗口小组件，并了解 WidgetKit 如何利用 SwiftUI 的功能提供无状态体验。了解如何利用现有的先进技术确保小组件显示相关内容。并创建一个时间线，从而确保你能提供新鲜的内容。有关创建窗口小组件的更多信息，请查看“为窗口小组件构建 SwiftUI 视图”和“小组件编程临摹课程”。

资源

相关视频

WWDC22

WWDC21

优秀小组件的原则

WWDC20

下载

（你好 WWDC 2020）

大家好欢迎来到 WWDC （为您介绍 WIDGETKIT）大家好我叫 Nahir 是 iOS 系统体验团队的经理稍后我的同事 Neil 也会加入我的行列很高兴欢迎各位观看 “为您介绍 WidgetKit” 在 iOS 14 中我们有了一个引人注目的全新主屏幕体验即更加动态和个性化的窗口小组件我们的新小组件设计新颖、便于快速浏览而且非常高效不仅能在 iPhone 的主屏幕上使用

也适合用于焕然一新的“今天”视图

能固定在 iPad 主屏幕上同时也能用于 MacOS Big Sur 的新颖精美的“通知中心”

不过在我深入研究 API 之前先让我们来讨论一下是什么造就了一个优质的小组件体验当团队开始考虑这个问题时我们很快就达成了三个主要目标一个优秀的小组件要做到可速览、有关联性和个性化

那我们说一个优秀的小组件是可速览的又是什么意思呢？稍后我们就会讲到其实新小组件是可以有多种尺寸的特别是在小组件尺寸最小的情况下只有大约四个主屏幕图标的空间所以一定要充分利用这些空间人们在主屏幕上通常只花上几分钟就会切换到别的地方了他们应该不需要与你的小组件进行交互最多只要快速看一眼就可以从小组件中获得最大的价值

请看一些小尺寸的小组件示例你不需要轻点任何按钮或者甚至花时间去弄清楚一个复杂的用户界面内容才是重点

这一点很重要小组件不是迷你 app 你应把它看作是把你的 app 内容投射到主屏幕上而不是充满小按钮的完整迷你 app 有时很难弄清楚幸运的是我们的设计团队有一个很棒的讲座（设计优秀的小组件）可以帮助你思考在 app 中的哪些部分会带来极具吸引力的小组件体验

拥有一个可速览的小组件只是目标的一部分让这些小组件具有相关性也同样重要例如在早上准备出门时候我最关心的是天气但接下来在一整天之中也许就变成了提醒事项让我不要忘记要做的事情然后到了晚上就变成了音乐这样我就可以用一些喧哗的派对音乐来骚扰我的邻居开玩笑的呢而在我们的移动平台上空间就显得尤为重要我们想方设法地去确保正确的小组件可以在需要的时候被派上用场

这就是智能叠放的用武之地智能叠放是小组件的集合它将自动旋转以在顶部显示正确的小组件但你也可以轻扫过去有趣得很呢我们使用设备端智能技术来帮助显示叠放顶部的正确内容但是作为开发者你可以通过捐赠 Siri 快捷指令来实现这一目标这正是我们在过去几年中一直在构建的系统还有一个特定 WidgetKit API 以帮助系统确定你的小组件何时更加相关或者其它可能更相关的事物这是一个非常深奥的主题涉及的范围不仅包括小组件我们有一整个讲座专门讨论这个主题我强烈建议你去看看一个好的小组件应该可以让你对其进行个性化设置让我们来看看天气小组件没错单位是摄氏我是加拿大人我们用的是公制从一开始就有三种不同的尺寸供你选择小、中、大你不需要支持所有尺寸因为有些体验并不适用所有尺寸但我建议支持尽可能多的尺寸让我们进一步定制天气小组件在编辑模式下只需点击小组件翻转以快速配置所有配置选项都是使用意图构建的你可以从快捷指令中熟悉意图选择城市是一个相对简单的例子但这是一个充满可能性的强大系统而 WidgetKit 的最棒之处在于我们可以完全自动地从你的意图生成整个配置用户界面无需额外工作真的很酷来回顾一下一个优秀的小组件体验的目标是可速览、相关、个性化的

按照这些目标我们设计出 WidgetKit 让我们来一起看一下首先小组件从一开始就是一个多平台的目标让开发者尽可能容易地在 iOS、iPadOS 和 macOS 上应用他们的知识小组件的用户界面和 WidgetKit 完全是用 SwiftUI 构建的 SwiftUI 还使它能够轻松地将近自动支持动态类型和深色模式等功能

其次将小组件放在主屏幕上可产生强烈影响一般人一天要去主屏幕90多次而且只在那里短暂停留

你最不想看到的就是主屏幕上满是加载中的标识符号当在 watchOS 上设计复杂功能时我们有非常相似的目标即让东西准备就绪且能够立即可速览所以我们从它们的构建过程中获得了灵感

这意味着 WidgetKit 扩展是在时间线中返回一系列视图层次结构的后台扩展利用 SwiftUI 的声明性我们可以在此时间线中打包这些视图然后将它们发送到主屏幕上主屏幕会根据时间线在正确的时间呈现它们这就避免了在整个启动过程中进行加载然后呈现到视图它们都准备好了立即可速览

我们预先准备好了视图这一点意味着我们也可以在系统的其他区域再次使用它们例如要拥有这种超级有趣的体验可从小组件图廊中添加小组件然后使用该 app 的人可以在主屏幕上预览小组件你可以从主 app 中刷新这些时间线例如若你的 app 发生了变化那么小组件就会进行更新

也可以直接从扩展中设置更新时间

例如日历小组件知道我当天的所有事件以及事件发生的时间扩展可以使用这些信息来呈现正确视图来显示我下一次会议时间当我正在开会时就会继续呈现到下一个视图你知道吗？我觉得 Neil 和我不该喝咖啡而是去城里我最喜欢的牛排店庆祝一下所以我进入日历并更新事件

然后日历将使用 API 来重新加载时间线我们的意思是扩展唤醒并返回一个包含所有新更新的新的时间线现在你已经对 WidgetKit 的工作原理有所了解让我把它交给 Neil 他将深入讲解如何构建一个小组件 Neil 该到你了谢谢 Nahir 大家好我叫 Neil Desai 是 WidgetKit 的工程经理今天我很高兴可以讨论如何创建一个优秀的小组件为此我想谈四件主要的事情我们将讨论如何定义一个小组件并学习如何创建一个可速览的体验我们还将讨论小组件的引擎我们的视图、时间线和重新加载以及小组件的个性化和智能化方面小组件非常简单但功能却非常强大我们要谈谈你可以使用的所有工具首先让我们学习如何定义小组件要定义小组件我想先讨论几个不同的概念分别是种类、配置、 supportedFamilies 和占位符

当我们开始这个项目时我们讨论了很多想要启用的不同类型的小组件我们想要一个机制以允许单个扩展支持多种小组件

例如单个股市扩展提供了类似股市概述小组件的体验这是一个很棒的小组件它提供了一些股票的简单信息而且同样的扩展也为股市细节小组件提供了动力允许用户在主屏幕或在 MacOS 上的 Notification Center 上显示单个股票正如 Nahir 所提到的这一切都是通过使用 SwiftUI 和一个多平台扩展完成的 WidgetKit 扩展可支持 SwiftUI、AppKit 和基于 Catalyst 的 macOS app 各种小组件还可以显示其可支持的类型配置一个是 StaticConfiguration 另一个是 IntentConfiguration

健身小组件对于配置来说并没有什么意义小组件不需要允许用户以任何方式配置它这个小组件实际上只能显示你今天的运动而我刚好没有什么活动我该多运动一下但我离题了总之… 这个小组件有一个 StaticConfiguration

另一方面提醒事项可以针对特定列表进行个性化设置这个小组件使用 IntentConfiguration

一种特定类型也能启动使一个或多个 supportedFamilies 默认情况下小组件支持所有家族类型天气小组件支持所有家族所以我可以享受华氏温度下的所有家族类型而不是像 Nahir 所喜欢的摄氏温度这些家族在 iOS 上看起来很棒

在 maCOS 上也很棒小组件定义的最后一个关键组件是占位符用户界面每种小组件都需要提供一个占位符用户界面占位符用户界面是小组件的默认内容它应该是小组件类型的表示但仅此而已此用户界面中不应该有任何用户数据另一个需要注意的重要事项是此用户界面很少被检索也不能保证何时会检索通常我们只会在设备环境更改时要求一个新的占位符用户界面例如如果设备的动态类型设置更改

优秀的占位符用户界面显示了你的小组件类型的表示我鼓励你为你的小组件考虑最好的用户界面对了编程所有这四个关键组件都归结为这个小组件定义这里我们定义了一个示例小组件它符合小组件协议我们指定了一个种类我们返回一些小组件配置中里面有几个项在小组件设置中我们在占位符视图中指定一个提供者

我们稍后再谈提供者但实际上这就是我们如何设置小组件的引擎的

现在知道如何定义我们的小组件了下面我们就来说说如何创造一种可速览的体验天气是一个可速览小工具的好例子 Nike Run Club 的小组件和日历也一样这三个小组件都向我显示有用的信息并邀请我这个用户轻点启动 app 并找到更多信息创建可速览体验的第一个方面就是创建 StatelessUI SwiftUI 对此是最贴切的完美选择主屏幕和 Notification Center 上的这些交互是不同的这些小组件不是迷你 app 我们不支持在小组件内滚动不支持诸如开关和其他系统控件之类的交互元素也不支持视频或动画图像这些可速览用户界面允许你的用户轻松点击小组件和深度链接到你的 app 中让我们以音乐为例这是 systemSmall 中的音乐用户可以点击最近播放的专辑并直接深度链接到该 app 中 systemSmall 有一个单点击目标整个小组件都是点击目标目的是让用户直接进入 app

音乐的小组件也支持 systemMedium 有很棒的内容给我展示了一堆不同的专辑每个专辑都是一个单独链接可以带你直接进入该 app

可以使用小组件 URL API 将整个小组件与 URL 链接相关联如果要在 systemMedium 或 systemLarge 中创建子链接那么你可以使用新的 link API 和 Swift API （点击交互）

我们已经定义了小组件并知道如何创建一个可速览的体验现在让我们谈谈小组件体验的真正本质视图、时间线和重新加载的确有三种类型的用户界面体验需要你去考虑前面讨论过的占位符用户界面然后是 snapshot 和时间线 Snapshot 是系统需要快速显示单个条目的地方因此希望扩展能够快速返回一个视图越快越好因为当你这样做的时候你将在 iOS 华丽的小组件图廊中看到你真正的小组件这不是在设计时必须提供的截屏或图像这是你在 iOS iPadOS 和 macOS 上的真实小组件体验

在大多数情况下时间线的第一个条目和 snapshot 可以作为相同的条目返回所以你在小组件图廊中看到的就是当用户将它添加到他们的设备上时的画面按照这个思路如果 snapshot 只是一个条目那么在正确的时间显示的一系列多个视图就是时间线时间线是返回的视图和日期的组合它允许你指出应该在什么时间显示特定视图

我们就是通过返回一个时间轴来驱动小组件体验的时间线的返回应该支持黑暗和浅色模式我想再多介绍几句当 WidgetKit 扩展返回条目时我们将获取该信息并将视图层次结构序列化到磁盘（WidgetKit 扩展、小组件）这意味着我们实时呈现每个条目这使得系统能够在多个时间线上同时运行多个小组件我要强调这可是个很酷的技术时间线通常应返回数天的内容有些时候你的小组件需要返回更多的更新信息要通过我们称之为重新加载的概念来做到这一点

重新加载时系统将唤醒你的扩展并为放置在设备上的每个小组件要求一个新的时间线

重新加载有助于确保你的内容对你的用户始终是更新的我不知道你会怎么想但我经常发现代码是了解一个新主题最简单的方法那么让我们深入了解吧这是 TimelineProvider 协议我们有一个 TimelineEntry 它主要由日期提供环境信息的环境以及系统要求输入的环境组成

然后在 snapshot 函数系统要求输入一个条目在时间线函数中系统要求输入一系列条目

下面是如何遵守 TimelineProvider 协议的示例我会创建一个提供者在 snapshot 中我将创建一个条目并返回它在时间线中我将返回一个条目数组并附加一个重新加载策略每个时间线中都包含一个重新加载策略在这里你可以告诉系统什么时候要求下一个时间线

你可以要求在你提供的时间线末尾在特定日期之后重新加载也可以明确地告诉系统不要重新加载你的时间线例如可能你的小组件首先需要用户数据然后才能返回一个令人信服的时间表系统将考虑你的重新加载策略并确定重新加载小组件的最佳时间经常查看的小组件将获得更多的重新加载不经常查看的小组件将会收到更少的重新加载当设备环境发生变化时系统还将强制重新加载例如如果发生了重大的时间变化

系统将确定重新加载小组件的最佳时间但也有其他事件这可能需要请求系统从你的 app 中重新加载

例如你的 app 可能会收到后台通知或者用户可以在 app 本身进行更改当收到后台通知时你可以通过 WidgetCenter 使用 WidgetKit API 来重新加载时间线以唤醒扩展如果你的用户在你的前台 app 中做了相关的更改你也可以重新加载你的时间线

重新加载前台 app 时要谨慎只有当 app 中发生相关更改时才重新加载你的小组件这些更改应该反映在你的小组件中你可以在 app 进程或扩展中使用 WidgetCenter API 来重新加载时间线你可以选择重新加载每种时间线或重新加载所有时间线并且可以检索当前配置的列表很多时候你需要查询服务器以获取更多信息你可以使用后台 URLSessions 来启动任务并且你的有效负载将通过 onBackgroundURLSessionEvents 修饰器传递到扩展你还应该了解你的网络使用情况确保并将请求批处理到服务器并且只使用你所需的网络流量

当你的 app 处理器小组件在后台运行时重新加载由系统编预算在小组件所需的处理和联网方面要保持效率小组件并不在每一次操作中小组件并不是在主屏幕上创建实时运行体验

有许多方法可以驱动重新加载以帮助使小组件保持最新考虑适合你的小组件的正确体验并记住如何以不同的方式有效地重新加载你的时间线最后让我们谈谈如何使用户能够个性化小组件如果这对你有帮助的话并帮助通知叠放中的智能

个性化和智能化是由两大概念驱动的意图用作允许用户配置小组件的机制以及相关性即允许开发人员通知叠放中的智能意图都是由意图框架驱动的意图包含一组参数这些参数是要向用户提出的问题

例如天气的配置问题是返回预报的定位

意图框架已经用于与 Siri 和快捷指令的集成在 iOS14 中它现在用于驱动小组件配置

我们来看一个具体的例子股市的单一符号小组件询问要显示哪只股票当用户尝试配置小组件时意图可以通过允许股市返回与股市 app 中显示的相同股票列表来帮助回答这个问题这功能真的很强大而且有助于为你的 app 提供所需的工具为你的用户提供一个伟大的配置体验

但有时这可能还不够如果有人想要显示一只在主 app 中还不存在的股票该怎么办？好吧多亏了意图的强大功能我们可以使用意图的动态选项功能来驱动这种类型的体验因此用户可以在配置用户界面中进行搜索系统将启动股市意图扩展然后该扩展可以以股市符号的形式返回一系列答案在 iOS 14 中意图现在能支持 app 内的意图处理你的 app 可以回答这些问题

如果你想了解更多关于 app 内意图处理的信息请观看“SiriKit 和快捷指令中的新功能” 那么到了现在你还记得我们前面定义的那个小组件吗？以下就会讲到如何改变它以支持意图现在我们指定 IntentConfiguration 而不是 StaticConfiguration 并指定关联的意图

按照同样的思路这里是之前的 TimelineProvider 现在则演变成符合 IntentTimelineProvider 的提供者

它将向你传递一个意图对象根据意图中的参数则会生成一个特定时间线

小组件最酷的特性之一不仅是只有一个小组件而是在一个叠放中有多个小组件系统可以智能地旋转最相关的小组件你的 app 和小组件可以帮助培养这种智能有两种主要方法可以做到这一点当用户在你的 app 中执行动作时你的 app 可以捐赠快捷指令如果你的小组件是由相同的 INIntent 支持的则你的小组件在用户通常可能会执行该操作时会在叠放中旋转如果你想了解更多信息我建议查看 “启用小组件个性化和智能”讲座你的小组件扩展还能够通过 TimelineEntryRelationship API 用相关性值注释时间线条目当时间合适并且你觉得条目是最相关的时候则可以返回分数和持续时间来通知系统旋转到你的特定小组件分数是由你提供的浮动值相对于你曾经提供的所有条目持续时间是特定条目相关的时间间隔

我想确定并强调一下这个相关性值是相对于你曾经提供过的所有条目系统将获取你的相对值和所有其他小组件的值并确定要在堆栈中旋转到的正确小组件

小组件非常简单但功能却非常强大我们不过是简单介绍了一下小组件并不是迷你 app 所以要为用户考虑可速览的体验并使用时间线重新加载的概念和智能以在 iOS、iPadOS 和 macOS 上创造完美体验

代表 Nahir 和我本人我们希望各位参加 WWDC 愉快我们迫不及待地想看你所构建的内容

11:01 - StaticConfiguration Widget definition

@main
public struct SampleWidget: Widget {
    private let kind: String = "SampleWidget"

    public var body: some WidgetConfiguration {
        StaticConfiguration(kind: kind,
                            provider: Provider(),
                            placeholder: PlaceholderView()) { entry in
                                SampleWidgetEntryView(entry: entry)
                            }
        .configurationDisplayName("My Widget")
        .description("This is an example widget.")
    }
}

15:51 - TimelineProvider example

public struct Provider: TimelineProvider {

    public func snapshot(with context: Context, 
                         completion: @escaping (SimpleEntry) -> ()) {
        let entry = SimpleEntry(date: Date())
        completion(entry)
    }

    public func timeline(with context: Context, 
                         completion: @escaping (Timeline<Entry>) -> ()) {
        let entry = SimpleEntry(date: Date())
        let timeline = Timeline(entries: [entry, entry], policy: .atEnd)
        completion(timeline)
    }
}

20:45 - IntentConfiguration Widget definition

@main
public struct SampleWidget: Widget {
    private let kind: String = "SampleWidget"

    public var body: some WidgetConfiguration {
        IntentConfiguration(kind: kind,
                    intent: ConfigurationIntent.self
                            provider: Provider(),
                            placeholder: PlaceholderView()) { entry in
                                SampleWidgetEntryView(entry: entry)
                            }
        .configurationDisplayName("My Widget")
        .description("This is an example widget.")
    }
}

20:54 - IntentTimelineProvider example

public struct Provider: IntentTimelineProvider {

    public func timeline(for configuration: ConfigurationIntent, with context: Context, 
                         completion: @escaping (Timeline<Entry>) -> ()) {
        let entry = SimpleEntry(date: Date(), configuration: configuration)

        // generate a timeline based on the values of the Intent

       completion(timeline)
    }
}

正在查找特定内容？在上方输入一个主题，就能直接跳转到相应的精彩内容。