WWDC20 Session 10033 - Build SwiftUI views for widgets

本文知识目录

Build SwiftUI views for widgets

本文属于 WWDC20 中 Widgets 系列的文章。Widgets 是使用 SwiftUI 进行开发的，如果您对 SwiftUI 还不是很了解请翻看 Introduction to SwiftUI。如果希望先了解更多 Widgets 请移步文末的相关链接。

SwiftUI in widgets

00-opportunityToLearnSwiftUI

我们可以为 Widgets 提供基于时间线的内容，它将在适当的时机展示在 iOS 14 或 macOS Big Sur 系统的主屏幕上。得益于 SwiftUI 良好的屏幕自适应能力，Widgets 可以在不同的系统上展示出不错的效果。因此，尽管我们的应用程序发布在旧版本的系统中 (无法使用 SwiftUI)，Widgets 也将是我们学习和使用 SwiftUI 的绝佳机会。

Widgets 的展示效果如下：

01-SwiftUI&Widgets

事不宜迟，让我们直接通过 Demo 来体验如何使用 SwiftUI 来开发一个 Widgets

Caffiine Drink Demo

我们将要创建一个应用程序，用于记录和跟踪我们所喝的含咖啡因的饮料，并估算出我们体内的咖啡因含量。 应用如下：

03-coffeineDrinks

而 Widgets 正好可以作为该应用程序的重要补充，以便能够一目了然地知道我们当前的咖啡因含量。

这个是我们希望展示的 Widget 效果：

04-coffeineDrinksItem

首先，可以看到它的视觉和配色方案与我们的应用程序相同。

在顶部，我们显示了我们体内目前的咖啡因含量，底部记录的是我们喝的最后一杯咖啡的时间。请注意 ⚠️，咖啡因含量的背景形状与 widget 形状是同心圆的关系，它可是使用我们新出的 API 来实现的哦。

最后，也希望 widget 底部的持续时间能够实时更新以始终正确。

Hello Widget!

我们先新建一个项目，可以是 iOS、macOS 或 Multiplatform：

mutliplatform

接着需要再新建一个 widge 的 target，这里我们选择基于 iOS 项目的 widget：

01-xcode-widget

生成之后，让我们配上 Hello Widget！，并在 PreviewProvider 处添加上 WidgetPreviewContext：

1struct CafeineDrinkWidget_Previews: PreviewProvider {
2
3    static var previews: some View {
4        Group {
5            CafeineDrinkWidgetEntryView(entry: .preivewEntry, data: .previewData)
6        }
7        .previewContext(WidgetPreviewContext(family: .systemSmall))
8    }
9}

我们目前提供的 widget 样式分为三种：

1public enum WidgetFamily : Int, RawRepresentable, CustomDebugStringConvertible, CustomStringConvertible {
2    /// A small widget.
3    case systemSmall
4    /// A medium-sized widget.
5    case systemMedium
6    /// A large widget.
7    case systemLarge
8}

让我们一起来看看最简版本的 widget 😄 。

02-HelloWidget

Data Configuration

接着，让我们把 CaffeineWidgetData 配置起来：

 1struct CaffeineWidgetData {
 2
 3    public let drinkName: String
 4    public let drinkData: Date
 5    public let caffeineAmount: Measurement<UnitMass>
 6}
 7
 8extension CaffeineWidgetData {
 9    public static let previewData = CaffeineWidgetData(
10        drinkName: "Cappuccino",
11        drinkData: Date().advanced(by: -60 * 29 + 5),
12        caffeineAmount: Measurement<UnitMass>(value: 56.23, unit: .milligrams)
13    )
14}

接着再加上简单的 View LazyVStack 和 Text 来承载我们新添的数据。效果如下：

04-previewData

有了基本结构后，我们再丰富一下。先加点背景色，这里我们用 ZStack 来包装：

1var body: some View {
2  	ZStack {
3      Color("cappuccino")
4
5      LazyVStack(alignment: .leading) { ... }
6   }
7}

让我们把 drinkName 和 drinkDate 也展示出来：

1Text("\(data.drinkName) ☕️")
2   .font(.body)
3   .bold()
4   .foregroundColor(Color("milk"))
5
6/// NOTE: *New* Date provider API
7Text("\(data.drinkDate, style: .relative) ago")
8   .font(.caption)
9   .foregroundColor(Color("milk"))

注意，这里我们使用了 SwiftUI 新出的 DateStyle API

DateStyle

 1public struct DateStyle {
 2
 3    /// A style displaying only the time component for a date.
 4    /// Example output: 
 5    ///     11:23PM
 6    public static let time: Text.DateStyle
 7
 8    /// A style displaying a date.
 9    /// Example output:
10    ///     June 3, 2019
11    public static let date: Text.DateStyle
12
13    /// A style displaying a date as relative to now.
14    /// Example output:
15    ///     2 hours, 23 minutes
16    ///     1 year, 1 month
17    public static let relative: Text.DateStyle
18
19    /// A style displaying a date as offset from now.
20    /// Example output:
21    ///     +2 hours
22    ///     -3 months
23    public static let offset: Text.DateStyle
24
25    /// A style displaying a date as timer counting from now.
26    /// Example output:
27    ///    2:32
28    ///    36:59:01
29    public static let timer: Text.DateStyle
30}

再来看一眼效果：

05-allDataUsage

Restructuring

接下来，我们稍微调整一下代码结构，将内部的两个 LazyStack 抽离成单独的 View。这里可以用 Xcode 的 Extra Subview 来帮我们完成工作，我们只需将 🖱️移动到 LazyStack 上，按住 Command 并点击 🖱️ 就可以弹出如下窗口：

06-Extrack Subview

调整后，我们的结构就清爽很多了：

 1var body: some View {
 2    ZStack {
 3        Color("cappuccino")
 4
 5        LazyVStack(alignment: .leading) {
 6            CaffineAmountView(data: data)
 7            Spacer()
 8            DrinkView(data: data)
 9        }
10        .padding(.all)
11    }
12}

记得为我们新加的 CaffineAmountView 和 DrinkView 加上 CaffeineWidgetData 数据。

CaffineAmountView

最后再用我们的另一个新的 API 来修改 CaffineAmountView。

 1var body: some View {
 2    LazyHStack {
 3        VStack(alignment: .leading) {
 4            Text("Caffeine")
 5                .font(.body)
 6                .foregroundColor(Color("espresso"))
 7                .bold()
 8
 9            Text(Formatter.measurement.string(from: data.caffeineAmount))
10                .font(.title)
11                .bold()
12                .foregroundColor(Color("espresso"))
13                .minimumScaleFactor(0.8)
14        }
15        Spacer(minLength: 0) // #1
16    }
17    .padding(.all, 8.0)
18    .background(ContainerRelativeShape().fill(Color("latte"))) // #2
19}

先注意一下，这里将 Spacer 的 minLength 设置为 0 是为了将整个 AmountView 的内容撑满。然后在编写 Demo 的过程中发现新增的 LazyVStack 在 layout 过程中有 bug，无法正常将内容撑满，所以这里改回用 VStack。

07-LazyVStack

ContainerRelativeShape

A shape that is replaced by an inset version of the current container shape. If no container shape was defined, is replaced by a rectangle.

由于不同大小的设备可能对其 widget 使用不同的半径，这可能会导致情况变得有些麻烦。 而新出的 ContainerRelativeShape 是一种新的形状类型，它将采用最接近父视图容器形状的路径，并根据形状的位置使用适当的倒角半径。

通过添加 ContainerRelativeShape，我们的 AmountView 会采用与系统为 widget 定义容器形状相同的同心的角半径。如果更改主 VStack 的 padding 的值，则 AmountView 的倒角将发生变化，以使围绕它的边框在拐角曲线周围保持恒定的厚度。

例如，我们修改容器的 padding 为 10，AmountView 的倒角变化效果如下：

08-adjust padding

##PreviewProvider

我们来看看 Widge 在不同场景下的实际效果。

DarkMode

首先是 .envrioment 修饰符在 DarkMode 下的效果，这个其实完全由我们配置的 ColorSet 来保证的。

10-colorSet

然后我们在 View 上添加 colorScheme 的环境配置就可以了。

1CafeineDrinkWidgetEntryView(entry: .preivewEntry, data: .previewData)
2    .previewContext(WidgetPreviewContext(family: .systemSmall))
3    .environment(\.colorScheme, .dark)

SizeCategory

可通过 .envrioment 修饰符的 sizeCategory 来控制 widget 的字体大小。

1CafeineDrinkWidgetEntryView(entry: .preivewEntry, data: .previewData)
2    .previewContext(WidgetPreviewContext(family: .systemSmall))
3    .environment(\.sizeCategory, .extraExtraLarge)

让我们先来看看这两种情况的效果：

09-previewSize

Placeholder

今年的 SwiftUI 还提供了一个特别棒的功能，我们可以通过 isPlaceholder 修饰符来设置骨架图。

11-isPlaceholder

.isPlaceholder 还支持对单个视图的控制等。不过，目前的 Xcode 12 Beta1 版本还无法使用 😅。大家就且看一下吧。

WidgetFamily

最后一个预览，让我们一起看看如何通过 WidgetFamily 来控制 Widge 的展示。

 1struct CafeineDrinkWidgetEntryView : View {
 2    ...    
 3    @Environment(\.widgetFamily) var widgetFamily
 4
 5    var body: some View {
 6        ZStack {
 7            ...
 8            LazyHStack {
 9                LazyVStack(alignment: .leading) {
10                    CaffineAmountView(data: data)
11                    Spacer()
12                    DrinkView(data: data)
13                }
14                .padding(.all, 10)
15
16                if widgetFamily == .systemMedium, let phoneName = data.phoneName {
17                    Image(phoneName).resizable()
18                }
19            }
20        }
21    }
22}

这里我们在 widgetFamily 为 .systemMedium 的情况下，为其添加了一张最后喝过的咖啡的图片。

效果如下：

12-widgetFamily

New APIs

最后一节，再来回顾一下我们使用到的新 API

DateStyle

06-dateTeimAPI

ContainerRelativeShape

05-relativeShape

文末福利

由于本文的 Session 并未提供相应的 SampleCode。本人在文章撰写的过程中，顺带写了完整的 Demo，如有需要的同学可以自取：Github。⚠️ 注意，在有的 macOS 系统上通过 Xcode 12 Beta 运行后可能无法在模拟器上查看 widget，不过在 Xcode 的 sidebar 预览，完整效果建议在真实设备体验。

widget.gif

总结

  • 苹果通过独立的 taget 将 Widget 与主项目隔离开来，很好的支持了 Widget 发展，因为不会有历史包袱。
  • Widge 的定位还是比较清晰的，用于弥补宿主应用程序无法及时展示用户所关心的数据，而 Widget 正好很适合展示。
  • 配合越来越丰富的 SwiftUI 的功能和性能的提升，Widget 也能够与现有的苹果生态更好的集成。
  • Widget 也使得苹果在 iOS 和 macOS 生态的融合了也更进了一步。

知识点问题梳理

  1. Widget 支持在所有的苹果系统中使用吗 ？
  2. 本文的示例中使用了哪几种新 API，试着描述它们的功能 ？
  3. 本文的示例展示了几种环境描述符 ?

Widges 相关视频