C8324b2629b3bab11894c5aec42277da
WWDC20 - Build SwiftUI views for widgets

WWDC20 Session 10033 - Build SwiftUI views for widgets

本文知识目录

Build SwiftUI views for widgets

Build SwiftUI views for widgets

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

SwiftUI in widgets

00-opportunityToLearnSwiftUI

00-opportunityToLearnSwiftUI

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

Widgets 的展示效果如下:

01-SwiftUI&Widgets

01-SwiftUI&Widgets

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

Caffiine Drink Demo

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

03-coffeineDrinks

03-coffeineDrinks

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

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

04-coffeineDrinksItem

04-coffeineDrinksItem

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

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

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

Hello Widget!

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

mutliplatform

mutliplatform

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

01-xcode-widget

01-xcode-widget

生成之后,让我们配上 Hello Widget!,并在 PreviewProvider 处添加上 WidgetPreviewContext

struct CafeineDrinkWidget_Previews: PreviewProvider {

    static var previews: some View {
        Group {
            CafeineDrinkWidgetEntryView(entry: .preivewEntry, data: .previewData)
        }
        .previewContext(WidgetPreviewContext(family: .systemSmall))
    }
}

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

public enum WidgetFamily : Int, RawRepresentable, CustomDebugStringConvertible, CustomStringConvertible {
    /// A small widget.
    case systemSmall
    /// A medium-sized widget.
    case systemMedium
    /// A large widget.
    case systemLarge
}

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

02-HelloWidget

02-HelloWidget

Data Configuration

接着,让我们把 CaffeineWidgetData 配置起来:

struct CaffeineWidgetData {

    public let drinkName: String
    public let drinkData: Date
    public let caffeineAmount: Measurement<UnitMass>
}

extension CaffeineWidgetData {
    public static let previewData = CaffeineWidgetData(
        drinkName: "Cappuccino",
        drinkData: Date().advanced(by: -60 * 29 + 5),
        caffeineAmount: Measurement<UnitMass>(value: 56.23, unit: .milligrams)
    )
}

接着再加上简单的 View LazyVStackText 来承载我们新添的数据。效果如下:

04-previewData

04-previewData

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

var body: some View {
      ZStack {
      Color("cappuccino")

      LazyVStack(alignment: .leading) { ... }
   }
}

让我们把 drinkNamedrinkDate 也展示出来:

Text("\(data.drinkName) ☕️")
   .font(.body)
   .bold()
   .foregroundColor(Color("milk"))

/// NOTE: *New* Date provider API
Text("\(data.drinkDate, style: .relative) ago")
   .font(.caption)
   .foregroundColor(Color("milk"))

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

DateStyle

public struct DateStyle {

    /// A style displaying only the time component for a date.
    /// Example output: 
    ///     11:23PM
    public static let time: Text.DateStyle

    /// A style displaying a date.
    /// Example output:
    ///     June 3, 2019
    public static let date: Text.DateStyle

    /// A style displaying a date as relative to now.
    /// Example output:
    ///     2 hours, 23 minutes
    ///     1 year, 1 month
    public static let relative: Text.DateStyle

    /// A style displaying a date as offset from now.
    /// Example output:
    ///     +2 hours
    ///     -3 months
    public static let offset: Text.DateStyle

    /// A style displaying a date as timer counting from now.
    /// Example output:
    ///    2:32
    ///    36:59:01
    public static let timer: Text.DateStyle
}

再来看一眼效果:

05-allDataUsage

05-allDataUsage

Restructuring

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

06-Extract Subview

06-Extract Subview

调整后,我们的结构就清爽很多了:

```swift
var body: some View {

top Created with Sketch.