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
實現更高效的無感交互體驗。
最后,希望能夠幫助到有需要的朋友,如果覺得有幫助,還望點個贊,添加個關注,筆者也會不斷地努力,寫出更多更好用的文章。