为小组件构建 SwiftUI 视图

小组件是来自 app 的小块信息，用户可以选择将其放在主屏幕或 Today view 中。了解使用 SwiftUI 从头开始构建小组件视图的过程。复习你需要了解用于特定小组件构造的句法，学习如何合并这些命令并自定义小组件界面，从而获得出色的浏览体验。要了解更多有关小组件的信息，请确保了解“ 小组件编程临摹课程”。

资源

相关视频

WWDC21

优秀小组件的原则

WWDC20

下载

（你好）

你好欢迎来到 WWDC

（为小组件构建 SWIFTUI 视图）我是 Niles 我是 iOS 系统体验团队的一名工程师今天我将向你展示如何为小组件构建 SwiftUI 视图

首先我们来谈谈 SwiftUI 如何启用小组件然后在本节的主要部分我们会一起构建一个小组件视图最后我们将介绍一些新的 API 这些新 API 让我们可以很好地使用 SwiftUI 来构建小组件让我们直接开始吧（小组件中的 SWIFTUI）通过 SwiftUI 和 WidgetKit 你可以提供视图的时间线以便适当的时候在主屏幕上显示得益于 SwiftUI 的适应性你可以编写小组件并将其部署到 iOS 和 macOS 中因为小组件是独立使用的并且是 iOS 14 和 macOS Big Sur 中的新功能即使你需要将 app 部署到可能无法使用 SwiftUI 的旧版操作系统中小组件也是我们学习和使用 SwiftUI 的绝佳机会我不知道你的情况但我最近喝了很多咖啡有些日子我喝得有点多了（CAFFEINE DRINKS）所以我创建了一个 app 来记录和追踪我喝的含咖啡因的饮料并估计出我体内咖啡因的含量我称它为“Wired”

我认为对 app 来说小组件是一个很好的补充它让我能随时知道自己体内的咖啡因含量这就是我想要的小部件（咖啡因 65.97 毫克卡布奇诺 8 分 56 秒之前）首先你可以看到它使用的是我的 app 视觉识别和配色方案

顶部显示的是目前我体内的咖啡因含量底部显示的是我最近一次所喝咖啡因饮料的名称及时间

请注意咖啡因含量的背景形状与小组件的形状同心

另外我希望小组件底部的时长可以实时更新以保证始终是正确的

让我们在演示中来看看 SwiftUI 是如何让这一切变得简单的

我已经设置好在时间轴上读取的小组件配置以便我们可以在此专注地创建小组件视图我将使用 SwiftUI 来创建此小组件视图这意味着我这里编写的所有东西都可以在你的 app 中使用

这是我的视图然后这是预览图我正在用 WidgetPreviewContext 来指定预览中要显示的小组件系列在这种情况下是小型规格的组件

首先让我们为驱动 UI 的数据定义一个结构

我称之为 CaffeineWidgetData 它包括三个属性咖啡因数量、饮料名称以及饮用日期我还有一个用于一些预览值的稳定常量以让我的预览图看起来更加真实

让我们把这一属性添加到视图中以保存此数据

接下来让我们更新预览以使用预览数据

我们准备开始构建视图让我们先添加一些内容

我正在用 VStack 来垂直堆叠视图顶部是“caffeine”一词正文字体加粗并使用了我在资产目录中定义的自定义颜色

下方是数量它的字体更大但外观相似

由于这个字体挺大的我想让它根据版面需要缩小一点所以我在这里设置了一个最小比例系数

接下来让我们使用 ZStack 给小组件添加背景色从而赋予其一些个性特征 ZStack 允许你将视图叠加在一起

你注意到我们的小组件会自动地从系统中获取它的形状、大小和角半径

现在让我们继续构建小组件添加我最后喝的饮料名称和饮用时间

自我最后一次喝咖啡以来的这段时间你可以看到我正在对文本使用新的初始化表达式它带有日期和样式从而为你格式化文本使用此初始化表达式时内容会随着时间的推移自动地从指定日期开始向上或向下计数这是个让小组件在主屏幕上显得生动有趣地好方法让我们点击画布中的“实时预览”按钮来看看小组件会呈现出怎样的视图你可以看到时长正在不断增加

（咖啡因 56.23 毫克）我甚至可以使用字符串插值来为字符串添加更多内容所以我可以像这样添加 “ago”一词

因为这是用的字符串插值所以框架会给你生成一个本地化的密钥这样该格式就可适用于其他地区和语言

事实上我们这里有两组内容如文本颜色所示：上面的棕色文本和下面的白色文本所以我们把它们分成两个 VStack 并在中间添加一个 spacer 部件我将回到这里并点击此文本选择“Embed in VStack”

把此文本移到 VStack 里面

接下来我将对此文本执行相同的操作点击“Embed in VStack”

然后把第二个文本移到里面

并在它们中间添加一个 spacer 部件

我要让这两个 VStack 都是前导对齐的要在画布中做到这点我可以点击属性检查器中垂直堆栈部分的前导按钮

这里

以及这里

这开始变得有点复杂了所以我打算把顶部和底部的部分提取到它们各自的子视图中因为这是 SwiftU 它的视图很便宜所以我几乎可以免费完成这个操作

我点击这里的 VStack 然后选择“ExtractedView” 让我们称之为“CaffeineAmountView”

让我们添加一个属性以保存一些数据

然后我要对底部的 VStack 执行同样的操作单击“Extractsubview” 让我们称之为“Drinkview”

让我们也给它添加同样的属性

最后让我们传入一些数据

虽然小组件看起来是一样的但是我们用了更好的代码结构来构建它

我希望我的内容是前导对齐而不是居中的我将把 CaffeineAmountView 的内容包装在一个 HStack 中并在末尾添加一个 spacer 部件点击“Embed in HStack”

HStack 也就是 “水平堆栈” 可以让你把视图相邻放置通过在末尾添加一个 spacer 部件我是在告诉布局系统将我的内容推到相反方向的边缘也就是前导边缘处因为我不需要任何最小间距所以我将指定最小间距为零这样我的内容就可以占用尽可能多的空间

让我们给内容添加一些 padding 让它看起来更加美观因为这是 SwiftUI 所以我可以将光标放在主 VStack 上使用画布来完成这个操作

然后在属性检查器的 padding 部分点击这四个复选框

你可以看到我没有为该 padding 指定一个值 SwiftUI 将为它运行的设备和配置使用一个合适的默认值

我想强调 CaffeineAmountView 因此我打算给它设置一个背景

我使用了资产目录中名为“latte”的颜色

让我们点击属性检查器中的四个复选框再次添加一些 padding

这有点太多了我们把它设成八个

你可以看到这个形状的角不是圆角正如《Human Interface Guidelines for Widgets》中所描述的那样圆角矩形是小组件视觉设计语言的重要组成部分所以我要把这个形状的角磨圆

我可以使用 cornerRadius 修饰符像这样

然后试着找到一个看起来不错的值但不同的设备的组件可能使用不同的半径所以这可能会变得有点麻烦

我们在 iOS14 中使用新的 ContainerRelativeShape 这为实现这点提供了一个更好的方法

ContainerRelativeShape 是一个全新的形状类型它将采用由父级指定的最接近的容器形状的路径并根据形状的位置使用适当的角半径在这个例子中系统正在为我们的小组件定义容器形状我们非常容易获得了与其同心的角半径

如果更改了我们的主 VStack 的 padding 值 CaffeineAmountView 的角半径就会发生变化从而使它周围的边界在角的曲线周围保持一个恒定的厚度

最后让我们使用一个 spacer 部件为最重要的内容提供一些呼吸空间

好了我们已经实现了我们想要的设计我个人认为它看起来很漂亮我迫不及待地想将其添加到主屏幕中让我们看看我的小部件在深色模式下的样子为此让我复制预览并添加修饰符以将其设置为深色模式

由于我所有的颜色都来自资产目录我在资产目录中为它们定义了深色外观差异所以我的小组件会自动应用深色模式

我妈妈也会喝很多咖啡因此我敢肯定 Wired 会让她感到很兴奋但是对她来说底部的文本可能太小而很难阅读因此让我们更新小组件以支持动态类型以便她和所有喜欢较大文本的用户都可使用这一组件

首先我们添加一个新的预览以检查小组件在较大尺寸类别下的外观图

在这里我将尺寸类别设置为 ExtraExtraExtraLarge

看起来不错由于 SwiftUI 具备自适应特性我无需更改任何内容即可支持动态类型而且我无需进行其他工作就构建了一个包容性更强的小组件是不是很神奇？接下来我想谈谈占位符为了获得出色的小组件体验你应该提供一个占位符供系统在你的扩展程序中请求视图或设备被锁定时使用你的占位符应该看起来像你的小组件但没有任何特定的内容让我们看看如何修改视图使其也能作为占位符使用首先我将通过复制现有的预览来创建另一个预览

然后我将为它添加 “is placeholder true”修饰符使它成为一个占位符

你可以看到 SwiftUI 会自动地用圆角矩形替换我所有的文本内容并以与它们替换的内容所匹配的方式对它们进行样式设置

而如果我想在占位符中保留一些文本内容我可以为其添加 “is placeholder false”修饰符让我们把它添加到“caffeine”一词中

就像那样我更新了视图以将其用作小组件的占位符很简单对吗？我刚刚向你展示的 “is placeholder”修饰符将会在之后的版本中提供你可能知道小组件分为三个不同的系列：小型、中型和大型规格让我们看看将小组件更新到另一个小组件系列有多么简单让我们首先为中型规格添加一个预览

这看起来不错但有点浪费空间

在我的 app 中我会让用户在登录时提供他们的饮料照片所以将这些照片置于小部件中可以让我们更好地利用屏幕空间首先我要在数据结构中添加这一属性以保存该照片的名称

然后从预览资产目录中添加一张示例照片

让我们把照片添加到视图中我们只希望饮料照片出现在中型规格的小组件上为了能够创建此条件下的布局让我们为小组件系列添加一个 Environment 变量

我希望我的照片出现在现有内容的旁边所以我要把所有内容包装在一个 HStack 中

然后如果我们是在中型规格小组件中并且有要显示的照片我们要添加图像

并使其可调整大小

太棒了

最后让我们通过添加另一个预览来看看我们的尺寸占位符我敢肯定你开始摸到窍门了我是复制现有的预览图然后给它添加一个修饰符让其成为一个占位符

你可以看到 SwiftUI 知道自动用填充色替换图片的内容因此我无需做任何其他工作即可创建中型规格组件占位符非常棒对吧？这就是使用 SwiftUI 可以多么容易地构建小组件视图让我来介绍一下我刚刚在演示中向你展示的两个新的 API

首先让我们看一下如何使小组件的角半径看起来更漂亮嵌套圆角矩形时大多数时候你不想它们使用相同的角半径相反你希望它们是同心的

在 iOS14 中我们可以毫不费力实现这点将新的 ContainerRelativeShape 设置为你的视图背景 SwiftUI 会从这里接手下面的工作这非常简单

在 iOS14 中我们在 Text 上添加了新的初始化表达式以根据样式来格式化日期这使你可以创建倒数计时、计时器以及其他样式的绝对日期和相对日期由于这会随着时间的流逝而自动更新因此这是一种使小组件在主屏幕上栩栩如生的好方法

让我们来总结一下 SwiftUI 使你能够为用户构建引人入胜的小组件体验小组件会利用 SwiftUI 对自适应布局的现有支持

我们添加了新的 API 以便我们可以更轻松地在小组件中执行常见的某些操作请注意这些 API 不仅可用于小组件中还可用于其他任何地方因此你也可以在 app 中使用它们 (下一步）一定要查看“Meet WidgetKit”讲座部分以进一步了解小组件时间线的更多信息还有我的同事 Izzy 谈到的“Widgets Code-along”部分看他是如何使用 WidgetKit 从头开始构建小组件的希望大家在 WWDC 度过一段愉快的时间谢谢大家明年再见

18:40 - Concentric corner radius with ContainerRelativeShape

// Concentric corner radius with ContainerRelativeShape

struct PillView : View {
    var title: Text
    var color: Color

    var body: some View {
        Text(title)
            .background(ContainerRelativeShape().fill(color))
    }
}

19:09 - Displaying date and time

// Displaying date and time

// June 3, 2019
Text(event.startDate, style: .date)

// 11:23PM
Text(event.startDate, style: .time)

// 9:30AM - 3:30PM
Text(event.startDate...event.endDate)

// +2 hours
// -3 months
Text(event.startDate, style: .offset)

// 2 hours, 23 minutes – Automatically updating as time pass
Text(event.startDate, style: .relative)

// 36:59:01 – Automatically updating as time pass
Text(event.startDate, style: .timer)

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