iOS Widget 開發-3:Widget 的種類與尺寸(主屏、鎖屏、靈動島)

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×932170×170364×170364×38276×76172×76257×26
428×926170×170364×170364×38276×76172×76257×26
414×896169×169360×169360×37976×76160×72248×26
414×736159×159348×157348×35776×76170×76248×26
393×852158×158338×158338×35472×72160×72234×26
390×844158×158338×158338×35472×72160×72234×26
375×812155×155329×155329×34572×72157×72225×26
375×667148×148321×148321×32468×68153×68225×26
360×780155×155329×155329×34572×72157×72225×26
320×568141×141292×141292×311

iPadOS 小組件尺寸對照表(單位:pt,豎屏)

以下是 iPad 各機型在豎屏狀態下,Widget 的顯示尺寸對照表(單位為 pt)。

屏幕尺寸類型小(Small)中(Medium)大(Large)特大(ExtraLarge)
768×1024畫布141×141305.5×141305.5×305.5634.5×305.5
設備120×120260×120260×260540×260
744×1133畫布141×141305.5×141305.5×305.5634.5×305.5
設備120×120260×120260×260540×260
810×1080畫布146×146320.5×146320.5×320.5669×320.5
設備124×124272×124272×272568×272
820×1180畫布155×155342×155342×342715.5×342
設備136×136300×136300×300628×300
834×1112畫布150×150327.5×150327.5×327.5682×327.5
設備132×132288×132288×288600×288
834×1194畫布155×155342×155342×342715.5×342
設備136×136300×136300×300628×300
954×1373*畫布162×162350×162350×350726×350
設備162×162350×162350×350726×350
970×1389*畫布162×162350×162350×350726×350
設備162×162350×162350×350726×350
1024×1366畫布170×170378.5×170378.5×378.5795×378.5
設備160×160356×160356×356748×356
1192×1590*畫布188×188412×188412×412860×412
設備188×188412×188412×412860×412

? * “縮放顯示”設為“更多空間”時。
📌 “畫布”表示 Widget 視圖內實際可用布局區域;“設備”表示渲染到系統界面時的占位大小
所有尺寸單位為點(pt)


小結

iOS Widget 類型已從主屏擴展至鎖屏、靈動島、StandBy 模式、控制中心等多個系統界面,開發者應針對不同 WidgetFamily 精細適配布局與交互:

  • 🏠 主屏適合展示圖文組合與綜合信息
  • 🔒 鎖屏適合 glance 信息,限制更多
  • 🌙 靈動島為實時狀態展示,結合 ActivityKit
  • 🛌 StandBy 模式適合橫向沉浸式信息展示
  • 🎛 控制中心小組件適合快速交互操作

在設計時務必關注系統支持版本、尺寸對齊、刷新策略與交互能力,結合 iOS 17+ AppIntent 實現更高效的無感交互體驗。

最后,希望能夠幫助到有需要的朋友,如果覺得有幫助,還望點個贊,添加個關注,筆者也會不斷地努力,寫出更多更好用的文章。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/914063.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/914063.shtml
英文地址,請注明出處:http://en.pswp.cn/news/914063.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

ffmpeg 中 write_option()函數詳細注釋

author: hjjdebug date: 2025年 07月 11日 星期五 10:51:23 CST descrip: ffmpeg 中 write_option()函數詳細注釋 文章目錄1. 函數原型1.1 參數說明1.2 SpecifierOpt 說明符選項結構2. write_option 代碼注釋2.1 誰調用了write_option 函數?3. 小結:write_option()不僅在ffmpe…

PandaCoder重大產品更新-引入Jenkinsfile文件支持

寫在前面 安裝這個插件可以直接平替 Jenkinsfile Pro ,節省200元關于插件介紹的處女篇:https://mp.weixin.qq.com/s/fwMEhmx8vxVlvfnipx09Ag為什么叫「熊貓編碼助手」? 熊貓是中國的國寶,備受世界喜愛,代表著中國特色和…

鏈表算法之【判斷鏈表中是否有環】

目錄 LeetCode-141題 LeetCode-141題 給定一個鏈表的頭節點,判斷鏈表中是否存在環 class Solution {public boolean hasCycle(ListNode head) {// checkif (head null || head.next null)return false;// 定義兩個指針,一個快指針[fast]&#xff0c…

Ubuntu 22.04安裝SQL Server指南

看起來在安裝過程中出現了問題,導致 mssql-server 沒有正確安裝。以下是排查和修復步驟:1. 檢查是否成功安裝了 mssql-server 運行以下命令,確認是否已安裝: dpkg -l | grep mssql-server如果沒有任何輸出,說明 mssql-…

Vue+ElementUI聊天室開發指南

Hi,我是布蘭妮甜 !在現代Web應用中,實時聊天功能已成為許多社交平臺、協作工具和客戶支持系統的核心需求。本文將詳細介紹如何使用Vue.js框架配合ElementUI組件庫實現一個功能完整的聊天室應用。我們將從項目搭建開始,逐步實現用戶…

提升你的AI交互技能:使用Anthropic互動提示教程

探索Anthropic的互動式提示工程教程:讓Claude與你更默契 在當今人工智能世界中,熟練掌握有效的提示工程成為了與AI進行高效溝通的關鍵。Anthropic推出了一款全面且互動性強的教程,名為“Prompt Engineering Interactive Tutorial”&#xff0…

從 JavaFX WebView 遷移至 JxBrowser

長久以來,JavaFX 一直包含一個內置的 WebView 組件,這是在 Java 應用中渲染 Web 內容的一個穩定方案。然而,在更復雜或要求更高的使用場景中,它可能就不夠用了。因此,許多開發者轉向了像 JxBrowser 這樣的替代方案。 …

將 Go 應用從 x86 平臺遷移至 Amazon Graviton:場景剖析與最佳實踐

簡介 近年來,Amazon Graviton 處理器以其優越的性價比和強勁的性能,成為了構建高效、可擴展云原生應用的重要選擇。Graviton 采用基于 Arm64 架構的芯片,與傳統的 x86 架構相比存在不少架構差異。雖然 Go 天生對 Arm64 具有良好支持&#xf…

arcgis api for js 設置地圖服務請求帶有請求頭信息

通過地圖的config模塊的請求攔截器來設置請求頭信息,如下示例: 1、引入:‘esri/config’ 1、設置請求頭信息 import { loadArcgisModules } from /utils/map/mapLoadUtil export default { mounted() {this.loadMap()}, methods: {/** ****…

工業通信升級新選擇:耐達訊CCLINKIE轉Modbus TCP網關

在工業自動化系統中,協議轉換網關的選擇直接影響系統穩定性與通信效率。對于CCLINKIE轉Modbus TCP場景,耐達訊通信技術網關憑借以下特性,成為多個項目中的優選方案。技術選型要點協議兼容性支持CCLINKIE的令牌環機制與Modbus TCP的TCP/IP協議…

使用python的 FastApi框架開發圖書管理系統-前后端分離項目分享

今天給大家分享一個 我最近使用python 框架 fastapi 寫的一個web項目 ,叫圖書管理系統。項目主要是來鞏固 python的編程技術。使用的是前端后 分離開發。 主要實現的功能: 1、用戶管理:可以新增、編輯、刪除用戶信息。 2、圖書管理&#xff1…

上位機知識篇---Docker

Docker 詳細介紹 一、Docker 是什么 Docker 是一個開源的容器化平臺,它允許開發者將應用程序及其依賴項打包到一個標準化的單元(稱為容器)中,確保應用在任何環境中都能以相同的方式運行。 簡單來說,Docker 解決了 &…

藍橋杯第十六屆(2025)真題深度解析:思路復盤與代碼實戰

> 省一選手的血淚經驗:**避免這些坑,你也能沖進國賽!** 2025年藍橋杯省賽已落下帷幕,作為近年來**難度最高的一屆競賽**,不少選手在考場上遭遇了“滑鐵盧”。本文將以C++ B組真題為例,逐題解析解題思路,并提供**優化后的AC代碼與詳細注釋**。筆者最終排名省一前40%,…

使用gdal讀取shp及filegdb文件

一、使用qgis開源工具構建兩個文件,分別是filegdb和shp,每個文件包含一個圖層,圖層內容只包含一個字段:id,有兩個數據行,圖層幾何為多邊形,圖層都是如下的效果。二、使用rust讀取上述文件 rust依…

從0開始學習R語言--Day44--LR檢驗

之前我們提到用LM檢驗的方式,來判斷數據在空間上是否受到鄰近數據及其殘差的影響,但是LM檢驗是采用直接計算的方式,只關注了數據的殘差平方和,沒有數據關于依賴項的考慮,容易被結果誤導。而LR檢驗雖然在結果上有時候跟…

openEuler 24.03 (LTS-SP1) 下私有鏡像倉庫部署與自簽 SSL 全流程目標

目錄 openEuler 24.03 (LTS-SP1) 下私有鏡像倉庫部署與自簽 SSL 全流程 1 創建根 CA 與服務器證書(修正版:SAN 寫法兼容所有 OpenSSL) 2 配置 Docker Compose 文件 3 客戶端節點信任 CA 3.1 Docker 3.2 containerd 4 推送 / 拉取測試 …

mysql的LIMIT 用法

常見用法1. 限制返回行數-- 返回前5條記錄 SELECT * FROM products LIMIT 5;2. 分頁查詢(帶偏移量)-- 跳過前10條,返回接下來的5條記錄(第11-15條) SELECT * FROM products LIMIT 10, 5;-- MySQL 8.0 也支持這種語法 S…

maven 發布到中央倉庫之持續集成-03

maven 系列 maven-01-發布到中央倉庫概覽 maven-02-發布到中央倉庫常用腳本 maven-03-發布到中央倉庫之持續集成 maven-04-發布到中央倉庫之 Ignore Licence maven-05-maven 配置進階學習 maven-06-maven 中央倉庫 OSSRH 停止服務,Central Publishing Portal …

(補充)RS422

RS4221. 基本定義與定位 官方名稱: EIA/TIA-422(電子工業協會/電信工業協會標準422)。類型: 一種定義了電氣特性的 平衡式差分 串行通信標準。目的: 克服 RS-232 在傳輸距離、速率和抗干擾能力上的嚴重局限性。核心思想…

自建ELK vs 云商日志服務:成本對比分析

在當今數據驅動的時代,日志管理已成為企業IT基礎設施中不可或缺的一部分。面對日益增長的日志數據,許多團隊都在糾結:是自建ELK(Elasticsearch、Logstash、Kibana)堆棧,還是直接使用云服務商提供的日志服務…