Compose 中的樣式

Style API 是自訂或「設定」Jetpack Compose 元素和元件樣式的新模式，傳統上是透過修飾符完成。這項功能可讓您更深入、更輕鬆地自訂。

Styles API 可提升各種板型規格的彈性、改善效能，並簡化自訂設計系統的建立程序。即使不需要自訂元件，Styles API 也能為設計系統帶來許多好處。

重要區別在於，樣式並非修飾符的替代方案，但確實可以取代樣式參數，例如邊框間距和顏色。建議改用樣式而非參數，以提高彈性和效能。

樣式的優點

  • 簡化狀態式樣式設定：這個 API 提供更簡潔的宣告式方法，可定義根據不同狀態 (例如懸停、聚焦、按下) 變更的樣式，與修飾符系統相比，可大幅減少樣板程式碼。
  • 改善動畫狀態轉換：Style API 內建動畫功能，可在狀態之間轉換樣式屬性，並提供理想的效能特性，避免目前 animateColorAsState 方法會發生的重組。
  • 簡化元件 API：透過引入單一 Style 參數進行自訂，元件 API 大幅簡化，並提供更高的彈性。
  • 減少重組次數，效能優於修飾符：樣式會在 Compose 的繪製和版面配置階段執行，略過組合階段。
  • 更標準化的 API 組合：標準樣式屬性組合可讓任何元件套用樣式。

核心概念

概念 說明
Style 這個介面定義了 UI 元素的外觀，並提供一組標準的可設定樣式屬性。這與 CSS 樣式類似，可在本機或透過主題自訂。樣式會互相覆寫；如果設定屬性兩次 (例如 background())，則會產生單一最終值。
StyleScope Style 中 applyStyle() 函式的接收器範圍。提供定義視覺屬性 (邊框間距、背景、邊框等) 和存取目前 StyleState 的函式。
StyleState 提供狀態 (例如 isEnabled、isPressed、isChecked、自訂狀態)，您可以在樣式中使用這些狀態定義條件式樣式。

開始使用：新增依附元件

如要在自己的專案中使用 API，請務必使用最新 Alpha 版的 Jetpack Compose 基礎。在 settings.gradle.kts 檔案中，將快照 Maven 存放區新增至要使用的存放區清單。

在 libs.versions.toml 或直接在 app/build.gradle.kts 檔案中，將 Compose 版本設為 1.12.0-alpha03：

compose = "1.12.0-alpha03"

androidx-compose-runtime = { group = "androidx.compose.runtime", name = "runtime", version.ref = "compose" }
androidx-compose-ui = { group = "androidx.compose.ui", name = "ui", version.ref = "compose" }
androidx-compose-ui-graphics = { group = "androidx.compose.ui", name = "ui-graphics", version.ref = "compose" }
androidx-compose-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling", version.ref = "compose" }
androidx-compose-ui-tooling-preview = { group = "androidx.compose.ui", name = "ui-tooling-preview", version.ref = "compose" }
androidx-compose-ui-test-manifest = { group = "androidx.compose.ui", name = "ui-test-manifest", version.ref = "compose" }
androidx-compose-ui-test-junit4 = { group = "androidx.compose.ui", name = "ui-test-junit4", version.ref = "compose" }
androidx-compose-foundation = { group = "androidx.compose.foundation", name = "foundation", version.ref = "compose" }
下一頁
樣式基礎知識