小组件的新位置

小组件生态系统正不断扩展：了解如何使用最新版 WidgetKit API 让你的 App 在所有地方保持出色的外观。我们将向你展示如何识别小组件的背景、动态调整布局以及为生动渲染准备颜色，从而让你的小组件可以与任何环境无缝融合。

章节

资源

- 高清视频
- 标清视频

相关视频

WWDC23

如何让小组件更加生动

WWDC22

复杂功能和小组件：重新载入

下载

♪ ♪

Kathryn：大家好我是 Kathryn 一名 System Experience 的工程师今天我将谈谈小组件的新位置以及如何轻松优化小组件从而使其在所有地方都可以保持出色的外观首先我们先来快速回顾一下小组件的历史 iOS 14 在主屏幕上引入了小组件 iOS 16 使用了同一个简单的 WidgetKit API 在锁定屏幕上引入了小组件今年小组件生态系统将扩展到四个新位置： Mac 桌面 iPad 锁定屏幕 iPhone 新待机模式以及 Apple Watch 新智能叠放这就意味着用户将在更多位置看到他们最喜欢的小组件由于你的小组件也会自动出现在这些位置因此确保其在任何位置都可以保持外观精美尤为重要得益于 Mac 对 iPhone 小组件的支持即便你当前没有 macOS App 你也可以在 Mac 上使用小组件我的朋友 Devon 和 Graham 曾经邀请我帮助他们更新 Emoji Rangers 的小组件以使其可以出现在这些新位置你可能还记得 WWDC20 中的 “小组件‘边看边写’” 以及 WWDC22 中的 “复杂功能和小组件：重新加载” 首先我们会谈谈小组件新的内容外边距以及如何在 Apple Watch 上向其进行过渡接着我们会为小组件添加可以自动移除的背景然后我们会对小组件进行修改使其能够根据环境动态扩展布局最后我们会确保小组件中的元素均为生动渲染做好了准备我们这就开始吧今年小组件推出的新功能是内容外边距内容外边距是自动应用于小组件主体的填充用来防止你的内容过于接近小组件容器的边缘该外边距的大小取决于小组件显示的环境在 watchOS 9 及更低版本上小组件使用系统定义的安全区域从而防止内容太过接近边缘小组件可以通过向视图添加类似 ignoresSafeArea 的修饰符从而延伸到安全区域之外在 watchOS 10 及更高版本上小组件中的安全区域被内容外边距取代这就意味着类似于 ignoresSafeArea 的修饰符不再对小组件产生影响对于大多数小组件而言该更改并不会影响其外观但如果你的小组件中存在过去忽视安全区域的内容通过将 contentMarginsDisabled 修饰符添加到小组件配置中你仍然可以实现相同的效果其次对于应保留在默认内容外边距内部的内容只需添加 padding 即可你可以使用 widgetContentMargins 环境变量获取当前环境默认的外边距内容外边距以及这些新修饰符和变量在所有显示小组件的平台上均可使用现在我们来为 Emoji Rangers 小组件添加可移除背景就和在 iPhone 上工作一样小组件现有的配件系列也可以自动在 iPad 锁定屏幕上工作并且 iPad 还可以在其旁边显示 systemSmall 小组件这就是小组件在锁定屏幕上的样子在该环境中我们需要去除其背景以使其与其他小组件更加搭配幸运的是这样做十分简单这里是 systemSmall 小组件视图的代码可以看到该代码利用 ZStack 将 AvatarView 叠加在 gameBackground 的颜色上为了使背景颜色可移除我们只需要在 View 中添加 containerBackground 修饰符并将 gameBackground 颜色放入其中即可完成后系统就可以根据当前的环境自动移除小组件的背景 Apple Watch 中的智能叠放也可以利用这个新 containerBackground 默认情况下 accessoryRectangular 小组件在该环境中会获得深色材质背景通过在 View 中添加相同的 containerBackground 修饰符该小组件便会置于和其他小组件相同的背景上并与 App 的视觉识别相连想要了解更多有关该新环境的信息欢迎观看“Apple Watch 智能叠放的小组件设计” 对于照片和地图之类的小组件由于缺乏特别的前景内容所以没有移除背景的必要在这种情况下你可以在 WidgetConfiguration 中添加 containerBackgroundRemovable 修饰符并将其设置为 false 现在我们来对 iPad 锁定屏幕及待机模式中的布局进行优化天气小组件便可以很好地说明如何在背景移除的情况下更改布局

请注意观察小组件是如何在针对高效利用空间的优化后仍然保持着内容不变将内容推到边缘并放大重要元素经过这些调整小组件不仅更易于从远处查看同时还可以和待机模式实现更无缝的融合此外这些布局更改也可以帮助小组件与 iPad 锁定屏幕中的配件系列小组件实现更好的融合从而让所有系列的外观更为一致现在让我们前往 Xcode 在小组件中实现这些更改这里是用于 AvatarView 的代码也就是 systemSmall 小组件所使用的代码在右侧的 Xcode Previews 中我可以实时预览小组件的外观当小组件显示在容器背景被移除的环境中其内容外边距便会自动缩小从而使内容与边缘对齐接着我们就可以使用 showsWidgetContainerBackground 环境变量来检测小组件的背景是否被移除如果背景被移除删掉 HeroNameView 中英雄等级和经验等细节信息并在下方重新展示它们

在该环境中英雄的名字也会变得更大现在如果我们在环境间进行切换布局就会自动从初始视图变为放大的新视图

和配件系列小组件一样系统系列小组件也可以以生动渲染模式显示在 iPad 锁定屏幕上这意味着小组件将会被去色然后根据锁定屏幕背景进行适当着色但如果是这样渲染的话对比度问题就会影响小组件的清晰度例如英雄头像就很难从圆形背景中分辨出来让我们回到 Xcode 中对小组件进行修改以使其在生动渲染模式下将背景移除让我们在待机夜间模式中看看吧我们可以使用 widgetRenderingMode 环境变量检测正在使用的渲染模式然后更改 Avatar 中 includesBackground 参数检查是否处于生动渲染模式

待机夜间模式也可以使用生动渲染模式因此我们的头像在该环境下同样清晰可见想进一步了解更多有关小组件渲染模式的信息欢迎观看 WWDC22 中的 “复杂功能和小组件：重新加载” 而想要了解更多有关小组件新功能的信息欢迎观看“让小组件栩栩如生” 我对小组件发生的更改十分兴奋非常期待看到你利用这些新功能增强小组件的新想法感谢你的观看祝你生活愉快！ ♪ ♪

2:08 - SafeAreasWidget

struct SafeAreasWidgetView: View {
    @Environment(\.widgetContentMargins) var margins

    var body: some View {
        ZStack {
            Color.blue
            Group {
                Color.lightBlue
                Text("Hello, world!")
            }
                .padding(margins) 
        }
    }
}

struct SafeAreasWidget: Widget {
    var body: some WidgetConfiguration {
        StaticConfiguration(...) {_ in
            SafeAreasWidgetView()
        }
        .contentMarginsDisabled()
    }
}

3:19 - EmojiRangerWidget systemSmall

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

    var body: some View {
        switch family {
        case .systemSmall:
            ZStack {
                AvatarView(entry.hero)
                    .widgetURL(entry.hero.url)
                    .foregroundColor(.white)
            }
            .containerBackground(for: .widget) {
                Color.gameBackground
            }
        }
        // additional cases
    }
}

3:48 - EmojiRangerWidget accessoryRectangular

var body: some View {
    switch family {
    case .accessoryRectangular:
        HStack(alignment: .center, spacing: 0) {
            VStack(alignment: .leading) {
                Text(entry.hero.name)
                    .font(.headline)
                    .widgetAccentable()
                Text("Level \(entry.hero.level)")
                Text(entry.hero.fullHealthDate, style: .timer)
            }.frame(maxWidth: .infinity, alignment: .leading)
            Avatar(hero: entry.hero, includeBackground: false)
        }
        .containerBackground(for: .widget) {
            Color.gameBackground
        }
    // additional cases
}

4:22 - PhotoWidget

struct PhotoWidget: Widget {
    public var body: some WidgetConfiguration {
        StaticConfiguration(...) { entry in
            PhotoWidgetView(entry: entry)
        }
        .containerBackgroundRemovable(false)
    }
}

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