iOS 小组件开发第一篇：基础介绍

这里每天分享一个 iOS 的新知识，快来关注我吧

前言

今天开始讲小组件，大概分为七八篇连载。

iOS 的屏幕小组件 Widget 自 iOS 14 发布以来已经有 3 年时间了，目前国内/海外很多的 App 已经支持了，如果你还没有做过小组件，那就 out 了，我准备花几篇文章详细讲讲如何开发小组件。

请注意，开发小组件必须使用 SwiftUI，如果你还没接触过 SwiftUI，可以先去苹果的官方教程学习一些基础知识。如果你一直在观望是不是需要开始学习 SwiftUI，那么这就是一个很好的机会。

创建小组件扩展

1、将新的小组件扩展 Target 添加到你的应用程序 ( `File > New > Target` )：

2、点击下一步，给小组件命名

名字可以随意填写，比如我这里叫 MyWidget
Include Live Activity，这个选项跟灵动岛相关，本次教程不涉及，所以不需要勾选
Include Configuration App Intent 这个选项是一些动态配置，我们本次也不涉及，先不要勾选

3、点击完成，创建成功

小组件创建成功后，会多出来一个扩展 Target：

同时也会创建一个 MyWidget（跟上边的命名一致）的文件夹：

MyWidgetBundle 是小组件的代码入口文件
MyWidget 是主要的小组件代码文件
Assets 存放小组件需要用的资源

代码部分详解

先运行一下看看效果，选中 MyWidgetExtension Target，然后运行：

就会看到模拟器上出现了这个小组件，它的功能很简单，显示当前的时间：

然后打开 MyWidget.swift 文件，这个文件中总共分为 5 个部分：

struct Provider 负责为小组件提供数据
struct SimpleEntry 小组件的数据模型
struct MyWidgetEntryView 小组件的视图
struct MyWidget 小组件的配置部分
struct MyWidget_Previews 提供小组件在 Xcode 中的预览

Provider

这个结构体中有三个方法：

placeholder(in: ) 在首次显示小组件，没有数据时使用占位
getSnapshot(in: , completion: ) 获取小组件的快照，例如在小组件库中预览时会调用
getTimeline(in: , completion: ) 这个方法来获取当前时间和（可选）未来时间的时间线的小组件数据以更新小部件。也就是说你在这个方法中设置在什么时间显示什么内容。

SimpleEntry

这个结构体是小组件的数据模型，默认情况下只有 let date: Date 一个属性，后续如果你需要展示更多的数据，可以在这里增加你想要的数据属性。

MyWidgetEntryView

这个就是小组件的入口视图了，它包含一个 SimpleEntry 的数据模型，和一个 View。

MyWidget

这个文件包含小组件的一些配置，kind 是这个小组件的唯一标识，可以随便填，以后当你的 App 有多个小组件，为了识别某个小组件时会用得上。

WidgetConfiguration 可以针对小组件做一些配置，比如名称、描述、支持的类型等等：

less 复制代码

struct MyWidget: Widget {
    let kind: String = "MyWidget" // 唯一标识

    var body: some WidgetConfiguration {
        StaticConfiguration(kind: kind, provider: Provider()) { entry in
            MyWidgetEntryView(entry: entry)
        }
        .configurationDisplayName("这是小组件的名称")
        .description("这是小组件的描述.")
        .supportedFamilies([.systemSmall, .systemMedium, .systemLarge])
    }
}

MyWidget_Previews

这个结构体提供小组件预览，一般来说默认就行了，当然你也可以调整其中的预览代码。

基础部分就介绍完了，明天接着讲讲小组件的时间线（Timeline）部分。

参考资料

1

SwiftUI 官方教程: developer.apple.com/tutorials/s...