Compose 主題剖析

Jetpack Compose 的主題是由多個較低層級的建構和相關 API 組成。您可以在 MaterialTheme 的原始碼中查看這些套件，也可在自訂設計系統中套用。

主題系統類別

主題通常由多個子系統組成，這些子系統結合了共同的視覺元素和 行為概念這些系統可以使用 主題化值

舉例來說，MaterialTheme 包含 ColorScheme (色彩系統)、 Typography (字體排版系統) 和 Shapes (形狀系統)。

注意：類別應加上 Stable 或 @Immutable 註解，才能將資訊提供給 Compose 編譯器。詳情請參閱可組成項的生命週期指南。

@Immutable
data class ColorSystem(
    val color: Color,
    val gradient: List<Color>
    /* ... */
)

@Immutable
data class TypographySystem(
    val fontFamily: FontFamily,
    val textStyle: TextStyle
)
/* ... */

@Immutable
data class CustomSystem(
    val value1: Int,
    val value2: String
    /* ... */
)

/* ... */
ThemeAnatomySnippets.kt

主題系統 Composition Local

主題系統類別會以隱含形式提供給組合樹，如 CompositionLocal敬上 執行個體。這可讓可組合函式中的主題值採用靜態參照。

如要進一步瞭解「CompositionLocal」，請參閱： 使用 CompositionLocal 指南的本機範圍資料。

注意：您可以使用 compositionLocalOf 或 staticCompositionLocalOf 建立類別的 CompositionLocal。這些函式包含 defaultFactory 結尾 lambda，以便提供備用函式 與值相同的值建議你使用 合理的預設值，例如 Color.Unspecified、TextStyle.Default 等。

val LocalColorSystem = staticCompositionLocalOf {
    ColorSystem(
        color = Color.Unspecified,
        gradient = emptyList()
    )
}

val LocalTypographySystem = staticCompositionLocalOf {
    TypographySystem(
        fontFamily = FontFamily.Default,
        textStyle = TextStyle.Default
    )
}

val LocalCustomSystem = staticCompositionLocalOf {
    CustomSystem(
        value1 = 0,
        value2 = ""
    )
}

/* ... */
ThemeAnatomySnippets.kt

主題功能

主題函式為進入點和主要 API，容器會建構執行個體 主題系統 CompositionLocal - 使用實際值任何邏輯 必要 — 提供給具有 CompositionLocalProvider。 content 參數允許巢狀的可組合項存取階層相對的主題值。

@Composable
fun Theme(
    /* ... */
    content: @Composable () -> Unit
) {
    val colorSystem = ColorSystem(
        color = Color(0xFF3DDC84),
        gradient = listOf(Color.White, Color(0xFFD7EFFF))
    )
    val typographySystem = TypographySystem(
        fontFamily = FontFamily.Monospace,
        textStyle = TextStyle(fontSize = 18.sp)
    )
    val customSystem = CustomSystem(
        value1 = 1000,
        value2 = "Custom system"
    )
    /* ... */
    CompositionLocalProvider(
        LocalColorSystem provides colorSystem,
        LocalTypographySystem provides typographySystem,
        LocalCustomSystem provides customSystem,
        /* ... */
        content = content
    )
}
ThemeAnatomySnippets.kt

主題物件

您可以使用具有便利屬性的物件來存取主題系統。為保持一致性，物件通常會採用與主題函式相同的名稱。屬性只會取得本機目前的組合。

// Use with eg. Theme.colorSystem.color
object Theme {
    val colorSystem: ColorSystem
        @Composable
        get() = LocalColorSystem.current
    val typographySystem: TypographySystem
        @Composable
        get() = LocalTypographySystem.current
    val customSystem: CustomSystem
        @Composable
        get() = LocalCustomSystem.current
    /* ... */
}
ThemeAnatomySnippets.kt