A1c7dc775e44552e62c247ce30c64a52
WWDC20 10034 - 《Widgets 边看边写》第一部分:冒险开始了

Session:https://developer.apple.com/wwdc20/10034

概览

本篇为 Widgets 边看边写(Widgets code-along)系列第一篇。
Widgets 边看边写系列正如字面含义一般,是让开发者能够跟随着完成一个 widget 的 session 系列。
本系列中的 Demo App 是一些 Emoji 角色,设定上每一个角色会有一个恢复时间。
本系列会用一些 Demo 中现有的一些 view 和数据结构完成一个 widget 用于在主屏幕展示每一个角色的恢复时间。
本系列中所用的 Demo 都可以在这里下载
本篇的核心在于告诉大家什么是 widgets,以及和大家一起开发一个简单的 widget。

注:由于笔者为了稳定未升级macOS到beta版本,所以是在10.15.5上跑的Xcode 12 Beta,预览功能因此失效,所以预览相关的截图使用的为 session 中原视频的截图。

什么是 Widget?

Widget 的本质是一个随着时间线而更新的 SwiftUI View。
这个系列关注的就是这 view 如何更新以及何时更新。

添加 Widget Extension

首先可以打开下载的 Demo 跑一下。
App 主体很简单,展示了几个角色,点击能进入详情页看到详细信息。
我们的目标是复用详情页左上角部分的 view 制作一个 widget。

和之前 iOS 上的其他 extension 一样,我们需要新建一个 Widget Extension。

由于直接复用App主体中的 UI,我们直接将这部分文件添到 Widget Extension Target中就可。

Widget文件初探

查看创建完 Widget Extension 后默认生成的 xxxxWidget.swift 文件,Xcode 为我们生成了 Widget 所需的模版代码。

点击右侧预览窗口中的创建预览,Xcode 还会额外为我们自动创建预览相关的代码。

struct EmojiRangerWidget_Previews: PreviewProvider {
    static var previews: some View {
        Text("Hello, World!")
    }
}

我们将 AvatarView 作为预览的 View,并设置为小号的 widget。Widget 最多支持大、中、小三种样式。

struct EmojiRangerWidget_Previews: PreviewProvider {
    static var previews: some View {
        AvatarView(.panda).previewContext(WidgetPreviewContext(family: .systemSmall))
    }
}

注:AvatarView 的构建需要一个 character 的入参,由于是预览界面,所以我们直接使用 .panda就可以。
实现后就能在右侧看到对应的预览界面。

@main 标识的部分是 widget 的入口。

@main
struct EmojiRangerWidget: Widget {
    private let kind: String = "EmojiRangerWidget"

    public var body: some WidgetConfiguration {
        IntentConfiguration(kind: kind, intent: ConfigurationIntent.self, provider: Provider(), placeholder: PlaceholderView()) { entry in
            EmojiRangerWidgetEntryView(entry: entry)
        }
        .configurationDisplayName("My Widget")
        .description("This is an example widget.")
        .supportedFamilies([.systemSmall])
    }
}
  • configurationDisplayName 是在添加widget时显示的标题。
  • description 是显示的描述。
top Created with Sketch.