iOS 呼聲最高的功能之一是可定制的鎖屏。終于，在最新發布的 iOS 16 得以實現。我們可以用可瀏覽的小組件填充鎖屏。實現鎖屏小組件很簡單，因為它的 API 與主屏小組件共享相同的代碼。本周我們將學習如何為我們的 App 實現鎖屏小組件。
讓我們從你可能早就有的 App 主屏小組件代碼開始。
struct WidgetView: View {
let entry: Entry
@Environment(\.widgetFamily) private var family
var body: some View {
switch family {
case .systemSmall:
SmallWidgetView(entry: entry)
case .systemMedium:
MediumWidgetView(entry: entry)
case .systemLarge, .systemExtraLarge:
LargeWidgetView(entry: entry)
default:
EmptyView()
}
}
}在上面的示例中，我們有一個定義小組件的典型視圖。我們使用 Environment 來知道 widget family 并顯示適當的大小。我們需要做的就是刪除默認語句，并實現定義鎖屏小組件的所有新用例。
struct WidgetView: View {
let entry: Entry
@Environment(\.widgetFamily) private var family
var body: some View {
switch family {
case .systemSmall:
SmallWidgetView(entry: entry)
case .systemMedium:
MediumWidgetView(entry: entry)
case .systemLarge, .systemExtraLarge:
LargeWidgetView(entry: entry)
case .accessoryCircular:
Gauge(value: entry.goal) {
Text(verbatim: entry.label)
}
.gaugeStyle(.accessoryCircularCapacity)
case .accessoryInline:
Text(verbatim: entry.label)
case .accessoryRectangular:
VStack(alignment: .leading) {
Text(verbatim: entry.label)
Text(entry.date, format: .dateTime)
}
default:
EmptyView()
}
}
}最好記住，系統對鎖屏和主屏小組件使用不同的渲染模式。系統為我們提供了三種不同的渲染模式。
- 主屏小組件和 Watch OS支持顏色的全色模式。是的，從 watchOS 9 開始，你還可以用 WidgetKit 去實現 watchOS 的復雜性。
- 振動模式(vibrant mode)是指系統將文本、圖像和儀表還原為單色，并為鎖屏背景正確著色。
- 重音模式(accented mode)僅在 watchOS 上使用，系統將小部件分為兩組，默認和重音。 系統使用用戶在表盤設置中選擇的色調顏色為小部件的重音部分著色。
渲染模式可通過 SwiftUI Environment 變量使用，因此你可以始終檢查哪個渲染模式處于活動狀態，并將其反映在設計中。例如，可以使用具有不同渲染模式的不同圖片。
struct WidgetView: View {
let entry: Entry
@Environment(\.widgetRenderingMode) private var renderingMode
var body: some View {
switch renderingMode {
case .accented:
AccentedWidgetView(entry: entry)
case .fullColor:
FullColorWidgetView(entry: entry)
case .vibrant:
VibrantWidgetView(entry: entry)
default:
EmptyView()
}
}
}如上所示，我們使用 widgetRenderingMode 環境值來獲得實際的渲染模式，并表現出不同的行為。像之前講到的，在重音模式( accented mode )下，系統將小部件分為兩部分，并對它們進行特殊著色。可以使用 widgetAccentable 視圖修改器標記視圖層次的一部分。在這種情況下，系統將知道哪些視圖應用著色顏色。
struct AccentedWidgetView: View {
let entry: Entry
var body: some View {
HStack {
Image(systemName: "moon")
.widgetAccentable()
Text(verbatim: entry.label)
}
}
}最后，我們需要為小組件配置支持類型。
@main
struct MyAppWidget: Widget {
let kind: String = "Widget"
var body: some WidgetConfiguration {
StaticConfiguration(kind: kind, provider: Provider()) { entry in
WidgetView(entry: entry)
}
.configurationDisplayName("My app widget")
.supportedFamilies(
[
.systemSmall,
.systemMedium,
.systemLarge,
.systemExtraLarge,
.accessoryInline,
.accessoryCircular,
.accessoryRectangular
]
)
}
}
如果你仍然支持 iOS 15，可以檢查新鎖屏小組件的可用性。
@main
struct MyAppWidget: Widget {
let kind: String = "Widget"
private var supportedFamilies: [WidgetFamily] {
if #available(iOSApplicationExtension 16.0, *) {
return [
.systemSmall,
.systemMedium,
.systemLarge,
.accessoryCircular,
.accessoryRectangular,
.accessoryInline
]
} else {
return [
.systemSmall,
.systemMedium,
.systemLarge
]
}
}
var body: some WidgetConfiguration {
StaticConfiguration(kind: kind, provider: Provider()) { entry in
WidgetView(entry: entry)
}
.configurationDisplayName("My app widget")
.supportedFamilies(supportedFamilies)
}
}
