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名称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下的组件：
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相关，不显示时间。运行查看效果：
