Compose 中的樣式

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

Styles API 可提升各種外型的彈性、提供更優異的效能，並讓您更輕鬆地建立自訂設計系統。即使不需要自訂元件，Styles API 也能為設計系統帶來許多好處。

重要區別在於，樣式並非修飾符的替代項目，但可做為樣式參數的替代項目，例如邊框間距和顏色。建議您改用 Styles，而非參數，以提升彈性和效能。

樣式的好處

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

核心概念

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

開始使用：新增依附元件

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

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

compose = "1.11.0-alpha06"

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" }