在 SwiftUI 中创建复杂功能

在 SwiftUI 中创建复杂功能

使用 SwiftUI 在 Apple Watch 上增加图形复杂功能。我们将教你如何在 Meridian 和图文这种表盘的复杂功能上使用自定义 SwiftUI 视图，查看创建复杂功能的最佳方法，我们还将演示在 Xcode 12 中的成果预览。要想充分利用本节内容，建议你先熟悉 SwiftUI 以及如何在 Apple Watch 上创建复杂功能等基础知识。获取相关信息，请查看“为 Apple Watch 创建复杂功能”并阅读“使用 SwiftUI 构建 watchOS App 界面”。了解如何在 SwiftUI 构建图形复杂功能后，结合 watchOS 7 的其他功能（如多重复杂功能和表盘共享）来为喜欢你 app 的用户创建充满个性和定制化的表盘。

资源
相关视频

WWDC22
- 进一步了解 WidgetKit 中的复杂功能
WWDC21
- Swift 并发功能：更新示例 App
WWDC20
下载

（你好 WWDC 2020）（你们好欢迎参加 WWDC）大家好我是 Matthew Koonce watchOS SwiftUI 工程师（工程师 MATTHEW KOONCE 工程师 AUGUST JOKI）稍后我的同事 August 会和大家见面今天我们为大家详细介绍如何打造出色的 SwiftUI 复杂功能复杂功能是指如何在表盘上显示关于 app 的及时和相关信息一些功能最强大、最实用的复杂功能可以从复杂信息中提炼出一眼就能明白的信息例如 UVI 复杂功能是垂直测量显示加上颜色渐变因此我很快就知道今天应该涂防晒霜
要构建类似 UVI 图表的复杂功能不简单不过有了 SwiftUI 复杂功能你可以将自己的 SwiftUI 知识运用到表盘当然没有 Xcode 预览我们也不能构建 SwiftUI 复杂功能现在你可以同时在不同的表盘上预览复杂功能今天我们将介绍如何在 SwiftUI 中构建你的复杂功能为此我们会了解 ClockKit 和 SwiftUI 中全新的 API 以实现上述目的
此外我们会讲解 SwiftUI 视图如何适应表盘着色以及一些最佳做法首先我们介绍 API
为在复杂功能中使用 SwiftUI 视图我们使用可靠的复杂功能模板 ClockKit 有几十个预定义模板为复杂功能提供简单易用的布局作为 watchOS 7 的新特性我们添加了模板使 SwiftUI 视图和其他 ClockKit 提供器在一起这些模板是关于“图形拐角” “圆形”、“矩形”
以及“特大号”所有分类的但 SwiftUI 真正厉害的地方在于只用单个 SwiftUI 视图的模板这些模板提供完整的画布用于绘制每一个分类
“图形矩形全视图”模板是一个全新的模板你可以在更大的画布上绘制
有了这一画布你可以使用 SwiftUI 做任何事情 SwiftUI 强大的绘制资料库任你使用你可以为复杂功能轻松创建新颖设计比如 Dawn Patrol app 的这个酷炫潮汐图
以上是关于如何把 SwiftUI 视图融入 ClockKit 模板同时我们在 SwiftUI 中做了调整使复杂功能更强大、灵活性更强（你好 WWDC）首先我们来讲下文本我们更新了文本让它知道显示在哪一个复杂功能分类上默认字体大小因不同的分类而异例如这里显示的范例文本是“图形矩形”复杂功能的它的字体在 Extra Large 表盘上会大很多默认字体也随之改为了 SF Rounded 几乎占据了整个表盘
此外文本有新的日期格式器在表盘上效果很好特别是 relative offset 和 timer 风格会由表盘自动更新（倒计时午睡时间 2 小时 46 分钟）例如为该日期使用 relative 风格能确保它相对现在始终是准确的
timer 风格也是这样我可以把日期放在内插字符串中它会自动显示 Sourdough 计时器的剩余时间
以上是我们在文本方面的改进接下来我们看下两个受欢迎的控件它们属于复杂功能被带到了 SwiftUI 它们是“进度视图”和“量规” （进度视图和量规） “进度视图”和“量规”都超级实用有各自的具体功能
“进度视图”非常适合以线性方式前进的信息比如音乐而“量规”则非常适合随时间而变化的信息比如温度我们先来看“进度视图”
最简单的设置中 “进度视图”只有一个值可以进行风格设置
这里我们使用的是“圆形”风格
我们也可以为“进度视图” 添加一个标签来描述它的功能这里我们使用音符 SF 符号
最后 “进度视图”可以着色完成音乐“进度视图”的构建
“进度视图”也有线性风格所有相同的 API 会如期望地那样显示下面我们再来看“量规“
“量规”是一个功能超强大的控件有超级多的配置选项我们来看下
这里有一个简单的“量规” 表示我们花园的土壤酸度水平它使用的是“圆形量规”风格
我们也可以添加一个当前值标签显示在“量规”的正中间让用户可以一眼明白它
对于有些“量规” 标明起始值和终止值可能很有用这里“量规”的值是从 3 到 10 下面我们添加标签输入最低值和最大值
和“进度视图”一样 “量规”也可以着色这里我们使用绿色
但量规真正实用的地方在于颜色渐变通过使用 SwiftUI 的渐变我能为酸度量规轻松指定颜色结点
“量规”也有线性风格非常适合“矩形”复杂功能比如在 Modular Compact 表盘上（花园土壤酸度）以上是“量规” API 的介绍不过有一点不要忘了 “量规”和“进度视图” 都是 SwiftUI 中的新控件你们可以根据需要进行构建例如我们在“矩形”复杂功能中使用一个“圆形”量规
或者在 app 中直接使用“量规”
以上是我们在 SwiftUI 和 ClockKit 中添加的新 API 接下来我们介绍关于表盘我最喜欢的功能之一表盘着色
表盘支持各种颜色因此可以进行更多个性化设置复杂功能使用这个表盘颜色赋予每一个表盘独特的风格
有些表盘比如太阳刻度盘更进一步它随着时间的变化改变着色颜色和每一个复杂功能的颜色
因此理解你的复杂功能在着色表盘上的表现是设计复杂功能的本质下面我们详细学习表盘着色的工作机制（表盘着色）我这里有一个全色视图蓝色圆形上有一个黄色苹果（全色）当表盘用一种颜色着色后会采用两种可能的着色效果之一
第一个是不饱和着色第二个是颜色不透明着色（不饱和）我们先来讲下不饱和着色
不饱和着色是复杂功能的默认着色模式当表盘着色时会创建一个灰色调视图（子午线特大号）一些表盘比如“特大号”表盘可能在这个不饱和视图上应用单个颜色我们来看下如何构建一个 SwiftUI 复杂功能让它在表盘上变得不饱和
这里是我视图的代码一个圆形和一个苹果图片的 ZStack
在表盘上看起来还不错
当表盘颜色变为红色时可以看到默认的不饱和模式开始出现视图在表盘上自动变为不饱和
这里是一个“特大号”表盘在不饱和视图上应用了单色这比较简单不用更改 SwiftUI 视图就可以给复杂功能顺利着色
不过需要注意你为复杂功能选择的颜色
如果我选择了一个亮度类似的颜色那么视图变为不饱和时苹果就会消失因此在构建复杂功能时考虑不饱和情况下视图的外观非常重要
以上是不饱和着色的内容接下来我们讨论颜色不透明着色（颜色不透明）不饱和着色是默认着色模式颜色不透明是我们可以选择的另外一种着色方式这需要我们在复杂功能中创建图层然后表盘为不同的图层应用不同的颜色
我们从全色视图开始首先确定复杂功能的图层表盘支持两个不同的图层
这里我们让圆形和苹果分开这就是我们的两个图层接下来顾名思义表盘就是只考虑每一个视图的不透明度既然两个视图都是完全不透明的所以他们都是白色的
然后表盘为相应的图层应用颜色不同表盘决定为每个图层应用相应的颜色这里表盘决定圆形图层应该是红色的苹果图层应该保持原来的白色
之后两个图层合在一起（特大号）如何将选择的颜色应用到所有图层是由表盘来定义的例如在“特大号”表盘上我们的苹果是白色的背景是红色（子午线）但是在子午线表盘上苹果是红色的背景是白色（太阳刻度盘）其他表盘比如太阳刻度盘可能会为两个图层应用不同的颜色
下面我们来看范例这次使用的是“特大号”表盘看看如何对复杂功能进行颜色不透明着色
我想要圆形和苹果分别在不同的图层默认情况下所有视图内容都是在背景图层
通过应用复杂功能前景调节器我决定把苹果图片放到前景图层中圆形保留在背景图层中现在我有了不同的图层颜色不透明着色开始出现
当表盘颜色改为红色时苹果就变为白色圆形变为红色
如果我再次改变表盘颜色可以看到背景也相应改变在“特大号”表盘上背景图层和表盘颜色一致我们来看下另外一种表盘
在子午线表盘中可以看到着色的图层和上面是相反的
以上是颜色不透明着色的介绍在视图层次中创建不同的不透明图层然后表盘为这些图层应用颜色效果非常棒（高级自定义）有些情况下为了着色你可能想对视图做出更多改变例如你可能想把背景色改为渐变的
又或者你想把背景彻底去掉全新的复杂功能渲染模式可以满足上述要求
渲染模式有两个值当视图在全色表盘上显示时就是全色当视图在着色表盘上显示时就是着色
我们可以从环境变量值获取当前值
我们回到范例看下如何使用复杂功能渲染模式
首先我可以使用环境变量获知当前渲染模式
接下来我们通过更改圆形的填充和复杂功能是全色还是着色来使用渲染模式
我们会添加一个 switch 语句检查渲染模式的当前值
在全色情况下让圆形保持原样使用蓝色填充
但是在着色情况下我们会彻底改变填充我们会使用线性渐变而不是单色
特别是只改变视图不透明度的渐变回想一下这是一个颜色不透明复杂功能因此屏幕显示只需要考虑视图的不透明度既然我们只能更改不透明度这个渐变的值是从一到零的不透明度
现在有了一个着色的复杂功能着色模式下的不透明度渐变填充全色模式下的蓝色填充信息量有些大所以我们回顾下要点（着色要点）首先默认情况下 SwiftUI 视图在表盘上是不饱和的如果你想要颜色不透明复杂功能那就使用复杂功能前景调节器把视图的不同部分放到一起进行着色
最后复杂功能渲染模式支持视图全色和着色复杂功能的高级自定义至此我们学习了所有新的 API 你可以用它们构建出色的 SwiftUI 复杂功能不过具体到实际操作下面由 August 为大家演示
谢谢 Matthew 我是 August Joki 一名表盘工程师接下来我为大家演示如何使用学到的 Xcode 知识不久前我们推出了全新的范例代码用以创建和更新复杂功能它叫 Coffee Tracker 这是 app 的外观（Coffee Tracker 范例代码创建和更新复杂功能）它已经包括了复杂功能这是一个展示全新 SwiftUI 复杂功能特性的好地方
Matthew 和我一直在想办法加入新的 SwiftUI 视图为用户记录咖啡因消费量他们可以看到过去一周换算成杯数的咖啡因消费量该图表融合了 app 的颜色视图看起来真的不错我们认为它会是一个很棒的 “图形矩形”复杂功能让我们打开 Xcode 看下如何融入 SwiftUI 和复杂功能模板以及如何支持着色的两种选项之前在打造 app 的历史视图时我们建立了一个预览方便快速查看我们对视图做出的更改对于简单视图来说可能不需要任何更改就能加到复杂功能中或者只是需要加入一两个新的属性以便在复杂功能中渲染
但鉴于我们的图表相当复杂我们决定创建新的视图用于复杂功能有了单独的视图我们可以概括复杂功能的所有更改
我们把新的视图添加到预览因为我们想把历史视图的 app 版本和复杂功能历史视图放在一起确保我们不会意外修改它我们选取历史视图的历史图表部分放到复杂功能中
要预览复杂功能我们首先创建 “全视图图形矩形”模板使用全新的 SwiftUI 视图
但是模板本身不是 SwiftUI 视图所以不能单独预览为此我们给 CLK 复杂功能模板添加了一个新功能叫 previewContext 当 ClockKit 和 SwiftUI 一起导入时定义该功能把模板包裹在 SwiftUI 视图中预览知道如何将其转化为钟面并且上面有一个复杂功能模板所有预览的复杂功能模板都是在最适合其分类的表盘上由于 SwiftUI 的强大功能复杂功能一开始就像是设计好的不过默认的“图形矩形”字体有点大和我们显示的内容不搭下面我们来解决这个问题
我们为图表添加一个字体调节器使字体大小更适合在复杂功能中显示
我们还想利用“图形矩形全视图” 模板的所有可用空间 Matthew 后面会详细讲解复杂功能的安全区域字体大小看起来不错可以看到图表和其他复杂功能一起显示在表盘上我们应该为我们的复杂功能数据提供一点背景而添加标题是一种很好的方式
既然这都是 SwiftUI 我们可以添加文本"Weekly Coffee" 把它和历史图表一起放在 VStack 中现在看起来完整多了但如果表盘着色后我们的复杂功能又会是什么样子呢？为此我们把预览的表盘颜色设置为蓝色
所有框架和之前一样但是颜色没有了下面我们使用复杂功能前景调节器让标题采用着色颜色
现在标题已自动着色匹配表盘的颜色既然我们的侧重点是支持着色那么我们的预览重点也放在着色上
现在可以看到一个彩色表盘旁边是着色表盘我刚注意到使用复杂功能前景调节器后渐变和量规也消失了这是因为我们一旦采用了着色支持我们的复杂功能就不再是不饱和的而只使用了我们视图层次的不透明度这意味着层次中的所有东西都降低到了不透明度值应用复杂功能前景调节器的部分被放到了一起有着相同的颜色正如之前学习的我们有另外一种方式处理着色复杂功能渲染模式环境变量值下面让我们用它在着色情况下更改图表渲染的方式不过我们先在预览中操作这样在更改不同文件时可以实时查看复杂功能的更新这里我们的视图中每一天对应一个圆柱
我们为复杂功能渲染模式添加一个环境属性并将新的属性写入我们的自定义“历史量规风格” 在着色情况下隐藏背景现在可以看到图表与全色情况下是不同的
通过复杂功能渲染模式我们可以更改视图层次的各个部分而不至于使代码板在全色和着色渲染之间有太大的偏离让我们回到复杂功能历史视图我们知道了新的复杂功能在蓝色表盘上的外观但是另外一个样本预览下的颜色如何呢？
我们可以充分利用 ClockKit 和 SwiftUI 合并使用的强大功能列出预览表盘颜色同时查看所有表盘现在我们能确保复杂功能的颜值因为这里列出了用户可能会为表盘颜色设置的一系列不同选项我为大家演示了使用 SwiftUI 和复杂功能模板的简单方式如何快速使用复杂功能前景调节器支持着色以及如何利用复杂功能渲染模式进行更精细的着色控制接下来再由 Matthew 讲解一些最佳做法谢谢大家谢谢 August 讲得非常棒 SwiftUI 使得高级图表的创建非常流畅比如我们的每周总结视图把它变为一个复杂功能从未如此简单过
接下来我们介绍一些最佳做法帮助你们构建自己的 SwiftUI 复杂功能（最佳做法）首先重要的一点是要知道在轻触复杂功能的任意位置时你的 app 会启动复杂功能不支持按钮手势和其他互动元素
在构建复杂功能时围绕文本图片和绘制基元
我们在 Xcode 中添加了一个新的运行完整性警告避免你使用的视图与复杂功能不兼容（最佳做法）最后不要忘记复杂功能是由静态视图组成的时间线因此不支持 SwiftUI 动画（最佳做法性能）此外我们希望你们考虑视图的性能特点
为使表盘保持高水平的性能所有 SwiftUI 视图的性能在屏幕上显示之前都会接受检测
请查阅《Human Interface Guidelines》和我们的说明文档确保你为每个复杂功能使用了大小合适的图片
请注意特定绘制属性的运行完整性成本比如模糊和格式化文本只进行绝对必须的绘制
注意性能差的视图可能会有损复杂功能的运行完整性
留意运行完整性警告比如这个关于视图大小或复杂性的警告
如果你的复杂功能发出了类似的运行完整性警告把它作为构建错误确保在推出复杂功能前修复这个错误为你的用户打造最佳体验（最佳做法布局）最后介绍下关于布局的一些最佳做法
为每一个复杂功能使用默认字体大小引导你们构建想要的视图
例如 “特大号”复杂功能可能提供画布进行绘制但它的目的是提供尺寸大且容易查看的信息
注意圆形和矩形的复杂功能分类会掩盖你的内容以适应各自的形状
矩形全视图复杂功能的特点是有一个可以布局的安全区域帮助防止你的内容在表盘上被剪裁（最佳做法矩形全视图）这个全新的、更大的绘制区域可能会被 Apple Watch 显示的拐角处剪裁特别在有些特定的表盘上默认情况下安全区域为你提供一个可以安全进行所有复杂功能布局的空间如果你想使用复杂功能的全部区域正如我们在 Weekly Coffee 复杂功能中所做的那样你可以使用“忽略边缘安全区域”调节器
这会为你提供一点额外的空间不过要注意内容的布局防止被剪裁以上是有关 SwiftUI 复杂功能的一些新的高级操作（结语）我们第一次看到了如何将你的 SwiftUI 知识运用到表盘上
我们还介绍了一些全新的有关文本、“进度视图”和“量规”的 API 以及复杂功能如何在表盘上着色
还有如何使用 Xcode 预览同时处理多个复杂功能和不同的表盘颜色（相关视频）如果你之前从未构建过复杂功能或者想梳理关于复杂功能模板和描述符的知识请观看《为 Apple Watch 创建复杂功能》的演讲视频
为确保你的复杂功能始终在对的时间显示对的信息我强烈推荐观看以下视频《保持复杂功能的及时更新》
感谢大家

import SwiftUI
import ClockKit

struct RelativeText: View {
    var body: some View {
        VStack(alignment: .leading) {
            Text("Count Down")
                .font(.headline)
                .foregroundColor(.accentColor)
            Label("Nap Time", systemImage: "moon.fill")
            Text(Date() + 100, style: .relative)
        }
        .frame(maxWidth: .infinity, alignment: .leading)
    }
}

struct RelativeText_Previews: PreviewProvider {
    static var previews: some View {
        CLKComplicationTemplateGraphicRectangularFullView(RelativeText())
            .previewContext()
    }
}

3:26 - Timer Text

import SwiftUI
import ClockKit

struct TimerText: View {
    var body: some View {
        VStack(alignment: .leading) {
            Label("Sourdough Timer", systemImage: "timer")
                .foregroundColor(.orange)
            Text("Time remaining: \(Date() + 100, style: .timer)")
        }
        .frame(maxWidth: .infinity, alignment: .leading)
    }
}

struct TimerText_Previews: PreviewProvider {
    static var previews: some View {
        CLKComplicationTemplateGraphicRectangularFullView(TimerText())
            .previewContext()
    }
}

4:04 - Progress View Sample #1

import SwiftUI
import ClockKit

struct ProgressSample: View {
    var body: some View {
        ProgressView(value: 0.7)
            .progressViewStyle(CircularProgressViewStyle())
    }
}

struct ProgressSample_Previews: PreviewProvider {
    static var previews: some View {
        CLKComplicationTemplateGraphicCircularView(ProgressSample())
            .previewContext()
    }
}

4:15 - Progress View Sample #2

import SwiftUI
import ClockKit

struct ProgressSample: View {
    var body: some View {
        ProgressView(value: 0.7) {
            Image(systemName: "music.note")
        }
        .progressViewStyle(CircularProgressViewStyle())
    }
}

struct ProgressSample_Previews: PreviewProvider {
    static var previews: some View {
        CLKComplicationTemplateGraphicCircularView(ProgressSample())
            .previewContext()
    }
}

4:23 - Progress View Sample #3

import SwiftUI
import ClockKit

struct ProgressSample: View {
    var body: some View {
        ProgressView(value: 0.7) {
            Image(systemName: "music.note")
        }
        .progressViewStyle(CircularProgressViewStyle(tint: .red))
    }
}

struct ProgressSample_Previews: PreviewProvider {
    static var previews: some View {
        CLKComplicationTemplateGraphicCircularView(ProgressSample())
            .previewContext()
    }
}

4:29 - Progress View Sample #4

import SwiftUI
import ClockKit

struct ProgressSample: View {
    var body: some View {
        VStack(alignment: .leading) {
            Text("Water Reminder")
                .foregroundColor(.blue)
            Text("32 oz. consumed")
            ProgressView(value: 0.7)
                .progressViewStyle(LinearProgressViewStyle(tint: .blue))
        }
        
    }
}

struct ProgressSample_Previews: PreviewProvider {
    static var previews: some View {
        CLKComplicationTemplateGraphicRectangularFullView(ProgressSample())
            .previewContext()
    }
}

4:45 - Gauge Sample #1

import SwiftUI
import ClockKit

struct GaugeSample: View {
    var body: some View {
        Gauge(value: 5.8, in: 3...10) {
            Image(systemName: "drop.fill")
                .foregroundColor(.green)
        }
        .gaugeStyle(CircularGaugeStyle())
    }
}

struct GaugeSample_Previews: PreviewProvider {
    static var previews: some View {
        CLKComplicationTemplateGraphicCircularView(GaugeSample())
            .previewContext()
    }
}

4:55 - Gauge Sample #2

import SwiftUI
import ClockKit

struct GaugeSample: View {
    @State var acidity = 5.8
    
    var body: some View {
        Gauge(value: acidity, in: 3...10) {
            Image(systemName: "drop.fill")
                .foregroundColor(.green)
        } currentValueLabel: {
            Text("\(acidity, specifier: "%.1f")")
        }
        .gaugeStyle(CircularGaugeStyle())
    }
}

struct GaugeSample_Previews: PreviewProvider {
    static var previews: some View {
        CLKComplicationTemplateGraphicCircularView(GaugeSample())
            .previewContext()
    }
}

5:02 - Gauge Sample #3

import SwiftUI
import ClockKit

struct GaugeSample: View {
    @State var acidity = 5.8
    
    var body: some View {
        Gauge(value: acidity, in: 3...10) {
            Image(systemName: "drop.fill")
                .foregroundColor(.green)
        } currentValueLabel: {
            Text("\(acidity, specifier: "%.1f")")
        } minimumValueLabel: {
            Text("3")
        } maximumValueLabel: {
            Text("10")
        }
        .gaugeStyle(CircularGaugeStyle())
    }
}

struct GaugeSample_Previews: PreviewProvider {
    static var previews: some View {
        CLKComplicationTemplateGraphicCircularView(GaugeSample())
            .previewContext()
    }
}

5:14 - Gauge Sample #4

import SwiftUI
import ClockKit

struct GaugeSample: View {
    @State var acidity = 5.8
    
    var body: some View {
        Gauge(value: acidity, in: 3...10) {
            Image(systemName: "drop.fill")
                .foregroundColor(.green)
        } currentValueLabel: {
            Text("\(acidity, specifier: "%.1f")")
        } minimumValueLabel: {
            Text("3")
        } maximumValueLabel: {
            Text("10")
        }
        .gaugeStyle(CircularGaugeStyle(tint: .green))
    }
}

struct GaugeSample_Previews: PreviewProvider {
    static var previews: some View {
        CLKComplicationTemplateGraphicCircularView(GaugeSample())
            .previewContext()
    }
}

5:21 - Gauge Sample #5

import SwiftUI
import ClockKit

struct GaugeSample: View {
    @State var acidity = 5.8
    
    var body: some View {
        Gauge(value: acidity, in: 3...10) {
            Image(systemName: "drop.fill")
                .foregroundColor(.green)
        } currentValueLabel: {
            Text("\(acidity, specifier: "%.1f")")
        } minimumValueLabel: {
            Text("3")
        } maximumValueLabel: {
            Text("10")
        }
        .gaugeStyle(
            CircularGaugeStyle(
                tint: Gradient(colors: [.orange, .yellow, .green, .blue, .purple])
            )
        )
    }
}

struct GaugeSample_Previews: PreviewProvider {
    static var previews: some View {
        CLKComplicationTemplateGraphicCircularView(GaugeSample())
            .previewContext()
    }
}

5:34 - Gauge Sample #6

import SwiftUI
import ClockKit

struct GaugeSample: View {
    @State var acidity = 5.8
    
    var body: some View {
        VStack(alignment: .leading) {
            Text("Garden Soil Acidity")
                .foregroundColor(.green)
            Gauge(value: acidity, in: 3...10) {
                Image(systemName: "drop.fill")
                    .foregroundColor(.green)
            } currentValueLabel: {
                Text("\(acidity, specifier: "%.1f")")
            } minimumValueLabel: {
                Text("3")
            } maximumValueLabel: {
                Text("10")
            }
            .gaugeStyle(
                LinearGaugeStyle(
                    tint: Gradient(colors: [.orange, .yellow, .green, .blue, .purple])
                )
            )
        }
    }
}

struct GaugeSample_Previews: PreviewProvider {
    static var previews: some View {
        CLKComplicationTemplateGraphicRectangularFullView(GaugeSample())
            .previewContext()
    }
}

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

提交你查询的内容时出现错误。请检查互联网连接，然后再试一次。

资源

相关视频

WWDC22

WWDC21

WWDC20