iOS Widget 开发-3:Widget 的种类与尺寸(主屏、锁屏、灵动岛)

发布于:2025-07-10 ⋅ 阅读:(360) ⋅ 点赞:(0)

iOS 支持多种类型的 Widget,分布在主屏幕、锁屏、灵动岛、待机模式、控制中心等多个系统位置。每种 Widget 都有各自的尺寸、交互能力与限制。

本篇将系统梳理 iOS 当前支持的 Widget 类型与尺寸规格。


主屏 Widget(Home Screen Widgets)

主屏 Widget 自 iOS 14 起引入,是最基础也是使用最广泛的 Widget 类型。

支持的尺寸

WidgetFamily 尺寸说明 备注
.systemSmall 小尺寸(1×1 单位) 常用于图标+文本
.systemMedium 中尺寸(2×1 单位) 图文并列展示
.systemLarge 大尺寸(2×2 单位) 多列列表
.systemExtraLarge 超大尺寸(4×2 单位) iPad 专属

特点

  • 可固定在主屏任意区域,支持 Smart Stack
  • 支持多实例与配置参数(如 Intent)
  • 默认不支持交互(按钮点击)
  • iOS 17+ 起支持 AppIntent 交互 ✅

AppIntent 交互(iOS 17 起)

通过 Button(action: intent) 和 AppIntent,可以实现在 Widget 内部触发操作,如:打卡、点赞、收藏等。

Button(intent: MarkHabitDoneIntent()) {
   Image(systemName: "checkmark")
}

Widget 的按钮将通过系统后台发送 Intent,不打开 App 即可处理。


锁屏 Widget(Lock Screen Widgets)

自 iOS 16 起支持,适合展示 glance 信息,如天气、电量、步数等。
如果是 iPad,则是从 iPadOS 17 起开始支持。

支持的 WidgetFamily

WidgetFamily 说明
.accessoryCircular 圆形图标型 Widget(如天气)
.accessoryRectangular 矩形展示(如日程、计步)
.accessoryInline 状态栏嵌入型(如实时步数)

特点

  • 可展示在锁屏界面
  • 信息量较小,更新频率有限
  • 不支持传统点击交互,但支持 widgetURL 跳转

灵动岛与 Live Activity(ActivityKit)

iOS 16 引入了 Live Activity,结合灵动岛展示实时更新内容。

适用场景

  • 外卖配送进度、航班倒计时、赛事比分
  • 运动状态、专注计时、导航中状态

展示区域类型

类型 描述
Compact 状态栏左右小图标
Expanded 长按或活动状态下展开,图文齐全展示

特点

  • 由 App 发起(startActivity)并定期更新状态
  • 使用 ActivityAttributes + SwiftUI 构建视图
  • 不是传统 WidgetFamily,但与 Widget 数据模型共享逻辑

StandBy Widget(待机组件)

自 iOS 17 起支持,iPhone 横屏充电时将自动进入待机模式,展示一组横屏视觉的锁屏组件或小组件。

支持尺寸:

WidgetFamily 展示方式
.systemSmall 左/右边栏小组件

特点:

  • 无需新注册 Widget,系统自动复用已注册的主屏或锁屏 Widget
  • 用户可在 StandBy 模式下左右滑动切换组件

控制中心组件(Control Center Widgets)

自 iOS 18 起,Apple 正式开放控制中心小组件支持,允许用户添加 App 提供的小组件至控制中心界面。

  • 用户可从控制中心编辑界面添加支持的 App 小组件
  • 支持 .accessoryCircular、.accessoryRectangular 等样式
  • 支持 AppIntent 快速交互,例如:开启任务、触发指令、打卡行为等

控制中心组件为提升常用操作效率提供了极佳入口,适用于快捷命令类 App、小工具类 App 等。


iOS 小组件尺寸对照表(单位:点 pt,竖屏)

屏幕尺寸(竖屏) 小(Small) 中(Medium) 大(Large) 圆形(Circular) 矩形(Rectangular) 内联(Inline)
430×932 170×170 364×170 364×382 76×76 172×76 257×26
428×926 170×170 364×170 364×382 76×76 172×76 257×26
414×896 169×169 360×169 360×379 76×76 160×72 248×26
414×736 159×159 348×157 348×357 76×76 170×76 248×26
393×852 158×158 338×158 338×354 72×72 160×72 234×26
390×844 158×158 338×158 338×354 72×72 160×72 234×26
375×812 155×155 329×155 329×345 72×72 157×72 225×26
375×667 148×148 321×148 321×324 68×68 153×68 225×26
360×780 155×155 329×155 329×345 72×72 157×72 225×26
320×568 141×141 292×141 292×311 无 无 无

iPadOS 小组件尺寸对照表(单位:pt,竖屏)

以下是 iPad 各机型在竖屏状态下,Widget 的显示尺寸对照表(单位为 pt)。

屏幕尺寸 类型 小(Small) 中(Medium) 大(Large) 特大(ExtraLarge)
768×1024 画布 141×141 305.5×141 305.5×305.5 634.5×305.5
设备 120×120 260×120 260×260 540×260
744×1133 画布 141×141 305.5×141 305.5×305.5 634.5×305.5
设备 120×120 260×120 260×260 540×260
810×1080 画布 146×146 320.5×146 320.5×320.5 669×320.5
设备 124×124 272×124 272×272 568×272
820×1180 画布 155×155 342×155 342×342 715.5×342
设备 136×136 300×136 300×300 628×300
834×1112 画布 150×150 327.5×150 327.5×327.5 682×327.5
设备 132×132 288×132 288×288 600×288
834×1194 画布 155×155 342×155 342×342 715.5×342
设备 136×136 300×136 300×300 628×300
954×1373* 画布 162×162 350×162 350×350 726×350
设备 162×162 350×162 350×350 726×350
970×1389* 画布 162×162 350×162 350×350 726×350
设备 162×162 350×162 350×350 726×350
1024×1366 画布 170×170 378.5×170 378.5×378.5 795×378.5
设备 160×160 356×160 356×356 748×356
1192×1590* 画布 188×188 412×188 412×412 860×412
设备 188×188 412×188 412×412 860×412

✅ * “缩放显示”设为“更多空间”时。
📌 “画布”表示 Widget 视图内实际可用布局区域;“设备”表示渲染到系统界面时的占位大小
所有尺寸单位为点(pt)


小结

iOS Widget 类型已从主屏扩展至锁屏、灵动岛、StandBy 模式、控制中心等多个系统界面,开发者应针对不同 WidgetFamily 精细适配布局与交互:

  • 🏠 主屏适合展示图文组合与综合信息
  • 🔒 锁屏适合 glance 信息,限制更多
  • 🌙 灵动岛为实时状态展示,结合 ActivityKit
  • 🛌 StandBy 模式适合横向沉浸式信息展示
  • 🎛 控制中心小组件适合快速交互操作

在设计时务必关注系统支持版本、尺寸对齐、刷新策略与交互能力,结合 iOS 17+ AppIntent 实现更高效的无感交互体验。

最后,希望能够帮助到有需要的朋友,如果觉得有帮助,还望点个赞,添加个关注,笔者也会不断地努力,写出更多更好用的文章。


微信公众号

今日签到

点亮在社区的每一天
去签到