1、前言

这篇文章我们将实现AppleWatch复杂功能(Complications)，本篇统一称为表盘组件。在WatchOS2开始到WatchOS8，都是通过ClockKit创建表盘组件，但在iOS9开始，苹果开始支持通过WidgetKit+SwiftUI实现表盘组件，与iOS的锁屏小组件实现基本打通了。下面的案例是按WidgetKit方式创建。

通过WidgetKit创建的组件，仅支持WatchOS9.0及以上的设备，如果仍要兼容低版本，则仍需按ClockKit方式创建。

2、添加Widget extension

点击File -> New -> Target，选择watchOS下的Wiget Extension

创建Target

输入Target名称MyHeartRateComplications，不勾选Include Configuration App Intent，点击Finish：

名称

Xcode会默认给我们创建好一个包含WidgetKit模板的MyHeartRateComplications.swift文件和Assets、Info.plist共三个文件。我们目前只需关注第一个文件，这是Xcode为我们提供的MyHeartRateComplications.swift的完整代码：

import WidgetKit
import SwiftUI

struct Provider: TimelineProvider {
    func placeholder(in context: Context) -> SimpleEntry {
        SimpleEntry(date: Date(), emoji: "😀")
    }

    func getSnapshot(in context: Context, completion: @escaping (SimpleEntry) -> ()) {
        let entry = SimpleEntry(date: Date(), emoji: "😀")
        completion(entry)
    }

    func getTimeline(in context: Context, completion: @escaping (Timeline<Entry>) -> ()) {
        var entries: [SimpleEntry] = []

        // Generate a timeline consisting of five entries an hour apart, starting from the current date.
        let currentDate = Date()
        for hourOffset in 0 ..< 5 {
            let entryDate = Calendar.current.date(byAdding: .hour, value: hourOffset, to: currentDate)!
            let entry = SimpleEntry(date: entryDate, emoji: "😀")
            entries.append(entry)
        }

        let timeline = Timeline(entries: entries, policy: .atEnd)
        completion(timeline)
    }
}

struct SimpleEntry: TimelineEntry {
    let date: Date
    let emoji: String
}

struct MyHeartRateComplicationsEntryView : View {
    
    @Environment(\.widgetFamily) private var family
    var entry: Provider.Entry

    var body: some View {
        VStack {
            HStack {
                Text("Time:")
                Text(entry.date, style: .time)
            }

            Text("Emoji:")
            Text(entry.emoji)
        }
    }
}

@main
struct MyHeartRateComplications: Widget {
    let kind: String = "MyHeartRateComplications"

    var body: some WidgetConfiguration {
        StaticConfiguration(kind: kind, provider: Provider()) { entry in
            if #available(watchOS 10.0, *) {
                MyHeartRateComplicationsEntryView(entry: entry)
                    .containerBackground(.fill.tertiary, for: .widget)
            } else {
                MyHeartRateComplicationsEntryView(entry: entry)
                    .padding()
                    .background()
            }
        }
        .configurationDisplayName("My Widget")
        .description("This is an example widget.")
        .supportedFamilies([.accessoryCorner, .accessoryCircular, .accessoryInline, .accessoryRectangular])
    }
}

#Preview(as: .accessoryRectangular) {
    MyHeartRateComplications()
} timeline: {
    SimpleEntry(date: .now, emoji: "😀")
    SimpleEntry(date: .now, emoji: "🤩")
}

（1）Provider

其中包含了实现TimelineProvider protocol的Provider,并提供了默认实现，WidgetKit调用这些方法来获取创建小部件视图所需的数据。

在每个协议方法中，您的应用程序都需要创建并返回一个或多个TimelineEntry实例：

• placeholder(in)
  返回一个占位的TimelineEntry数据，用于手表锁定、屏幕常亮模式或其它无法实时更新表盘组件时显示
• getSnapshot(in:completion:)
  返回一个TimelineEntry数据用作快照，一般情况下返回当前状态的数据。在选择表盘组件时，系统也会使用快照，此时可以通过context的isPreview属性进行判断，如果为true，则返回通用的TimelineEntry数据。
• getTimeline(in:completion:)
  返回一个时间线数据数组（TimelineEntry）。WidgetKit使用此数据随时间自动更新表盘组件。另外可以指定时间线的加载策略。默认情况下，时间线结束后，系统会请求加载新的时间线，但是在模版中，系统使用.atEnd策略，即不会自动请求新的时间线。

（2）SimpleEntry

模板定义了一个TimelineEntry，即上面TimelineProvider 协议方法中返回值类型SimpleEntry，其中包含日期和emoji两个属性。根据实际需求，我们可以添加所需属性。

（3）MyHeartRateComplicationsEntryView

SwiftUI实现的表盘组件UI，模板中默认显示上面SimpleEntry中的日期和emoji。我们可以根据需求，添加文字、形状、图像等基础UI控件，以及添加模糊和渐变等效果。但是不支持动画，也不支持按钮、开关等交互控件，因为点击表盘组件只能启动我们的Watch App，而不能响应其它交互。

Widget可以使用的View，可以参考苹果官方这篇文章:SwiftUI views for widgets

（4）MyHeartRateComplications

在此类中，进行表盘组件的配置，如组件的名称、简介、支持的类型，以及返回上面的View（MyHeartRateComplicationsEntryView）

3、运行项目

选择MyHeartRateComplicationExtension，选择Apple Watch设备，运行后长按表盘，点击Edit，即可对表盘组件进行编辑，替换为MyHeartRate下的组件：

MyHeartRate

表盘

4、问题！

从上面的截图中可以看见，.accessoryRectangular样式下数据能完整显示，但在.accessoryCircular样式下数据显示不全，所以我们应该根据不同组件类型单独设计UI样式，将MyHeartRateComplicationsEntryView替换为：

struct MyHeartRateComplicationsEntryView : View {
    
    @Environment(\.widgetFamily) private var family
    var entry: Provider.Entry

    var body: some View {
        switch family {
        case .accessoryCircular:
            MyCircularComplication(emoji: entry.emoji)
        case .accessoryRectangular:
            MyRectangularComplication(date: entry.date, emoji: entry.emoji)
        case .accessoryInline:
            MyInlineComplication(emoji: entry.emoji)
        case .accessoryCorner:
            MyCornerComplication(emoji: entry.emoji)
        @unknown default:
            Image("AppIcon")
        }
        
    }
}

且补充各个样式的UI实现：

struct MyCircularComplication: View {
    let emoji: String

    var body: some View {
        Text(emoji)
    }
}

struct MyRectangularComplication: View {
    let date: Date
    let emoji: String

    var body: some View {
        VStack {
            HStack {
                Text("Time:")
                Text(date, style: .time)
            }

            Text("Emoji:")
            Text(emoji)
        }
    }
}

struct MyInlineComplication: View {
    let emoji: String

    var body: some View {
        HStack {
            Text("Emoji:")
            Text(emoji)
        }
    }
}

struct MyCornerComplication: View {
    let emoji: String

    var body: some View {
        VStack {
            Text("Emoji:")
            Text(emoji)
        }
    }
}

即在accessoryCircular、accessoryCorner等样式中，只显示emoji相关，不显示时间。运行查看效果：

运行效果