如何用iOS14 Widget小组件自定义玩法

关注

VIP免费原创最新推荐文章于 2026-03-05 00:35:13 发布 2.8k 阅读 AI 写同款· GEO 优化 ›

SwiftUI 小组件 Widget（二）紧接上一篇小组件的创建SwiftUI 小组件 Widget（一）这篇来讲一下小组件的尺寸小组件最开始支持小、中、大三个尺寸，分别是到iOS 15新增了超大号，用于iPad端的再到iOS 16新增了锁屏小组件分别是机型se1141 * 141292 * 141292 * 311148 * 148321 * 148321 * 324155 * 155329 * 155329 * 345158 * 158338 * 158338 * 354159 * 159。阅读详情

一.了解Widget

iOS14带来了新的UI组件：WidgetKit，人称小组件（用过安卓的都能理解），这货的前身其实就是iOS10时候引入的Today Extension。

Widget为应用程序提供了这样一种功能：其可以让用户在主屏幕上展示App中用户所关心的信息。例如一款天气软件，其可以附带一个Widget让用户在主屏幕就可查看今日的天气情况，例如股票相关的软件，用户将自己感兴趣的股票收藏，无需打开App，在主屏幕即可查到对应的股价信息。

刚好iOS14正式版更新的节奏，抽点时间来试试整一个Widget小组件玩玩。

Widget只支持SwiftUI实现，OC项目同样可以创建，但是必须用SwiftuUI实现。

创建

通过Xcode -> File -> New -> Target菜单路径找到 Widget Extension，双击创建

这里随便输入你自己的命名，Include Configuration Intent这选项暂时不勾选，这选项主要是用来支持你自定义一些属性配置（例如天气组件，用户可以选择城市，股票组件，用户可以选择代码），不支持的话则不用勾选。

之后在Xcode的左侧项目目录可以看到，这里自动新增了一些东西，其中TestWidget.swift文件就是我们即将编写代码实现的地方。

先点进去看下Xcode为我们生产的默认代码，然后运行跑一下，看看模拟器效果。

解读

接下来看下Xcode生成的默认Widget实现代码

Provider

Provider：为小组件展示提供一切必要信息的结构体，实现TimelineProvider协议
placeholder：提供一个默认的视图，当网络数据请求失败或者其他一些异常的时候，用于展示
getSnapshot：为了在小部件库中显示小部件，WidgetKit要求提供者提供预览快照，在组件的添加页面可以看到效果
getTimeline：在这个方法内可以进行网络请求，拿到的数据保存在对应的entry中，调用completion之后会到刷新小组件

struct Provider: TimelineProvider {
    func placeholder(in context: Context) -> SimpleEntry {
        SimpleEntry(date: Date())
    }

    func getSnapshot(in context: Context, completion: @escaping (SimpleEntry) -> ()) {
        let entry = SimpleEntry(date: Date())
        completion(entry)
    }

    func getTimeline(in context: Context, completion: @escaping (Timeline<Entry>) -> ()) {
        var entries: [SimpleEntry] = []
        let currentDate = Date()
        for