Aufbau eines Designs in der Funktion "Compose"

Designs in Jetpack Compose bestehen aus einer Reihe von Low-Level-Konstrukten und zugehörigen APIs. Diese sind im Quellcode von MaterialTheme zu sehen und können auch in benutzerdefinierten Designsystemen angewendet werden.

Systemklassen für Designs

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

MaterialTheme enthält beispielsweise ColorScheme (Farbsystem), Typography (Typografiesystem) und Shapes (Formensystem).

@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
    /* ... */
)

/* ... */

Theme system composition locals

Designsystemklassen werden dem Kompositionsbaum implizit als CompositionLocal-Instanzen bereitgestellt. So können Designwerte in zusammensetzbaren Funktionen statisch referenziert werden.

Weitere Informationen zu CompositionLocal finden Sie im Leitfaden Lokale 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 = ""
    )
}

/* ... */

Designfunktion

Die Designfunktion ist der Einstiegspunkt und die primäre API. Es erstellt Instanzen der CompositionLocals des Designs mit echten Werten und der erforderlichen Logik, die dem Kompositionsbaum mit CompositionLocalProvider zur Verfügung gestellt werden. Mit dem Parameter content können verschachtelte Composables auf Designwerte relativ zur Hierarchie zugreifen.

@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
    )
}

Designobjekt

Der Zugriff auf Designsysteme erfolgt über ein Objekt mit Convenience-Properties. Aus Gründen der Konsistenz wird das Objekt in der Regel wie die Designfunktion benannt. Die Properties rufen einfach die aktuelle CompositionLocal 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
    /* ... */
}