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

发布于:2025-07-10 ⋅ 阅读:(19) ⋅ 点赞:(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 实现更高效的无感交互体验。

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


网站公告

今日签到

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