Aufbau eines Designs in der Funktion "Compose"

Themen in Jetpack Compose bestehen aus einer Reihe von untergeordneten Konstrukten und zugehörigen APIs. Sie finden sie im Quellcode von MaterialTheme und können auch in benutzerdefinierten Designsystemen angewendet werden.

Theme-Systemklassen

Ein Thema besteht in der Regel aus einer Reihe von Systemen, die gängige visuelle und verhaltensbezogene Konzepte gruppieren. Diese Systeme können mit Klassen modelliert werden, die Themenwerte haben.

MaterialTheme umfasst beispielsweise Colors (Farbsystem), Typography (Typografiesystem) und Shapes (Formsystem).

@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

Zusammensetzung des Themensystems – lokale

Theme-Systemklassen werden dem Zusammensetzungsbaum implizit als CompositionLocal-Instanzen bereitgestellt. Dadurch können Designwerte in zusammensetzbaren Funktionen statisch referenziert werden.

Weitere Informationen zu CompositionLocal finden Sie im Leitfaden für lokal zugeordnete Daten mit CompositionLocal.

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

Designfunktion

Die Designfunktion ist der Einstiegspunkt und die primäre API. Sie erstellt Instanzen der CompositionLocals des Themensystems unter Verwendung von realen Werten jeder erforderlichen Logik, die dem Zusammensetzungsbaum mit CompositionLocalProvider bereitgestellt werden. Der Parameter content ermöglicht verschachtelten zusammensetzbaren Funktionen den Zugriff auf Themenwerte relativ zur Hierarchie.

@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

Designobjekt

Der Zugriff auf Themensysteme erfolgt über ein Objekt mit praktischen Eigenschaften. Aus Konsistenzgründen wird das Objekt tendenziell so benannt wie die Theme-Funktion. Die Eigenschaften rufen einfach die aktuelle Zusammensetzung lokal ab.

// 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