Aufbau eines Designs in der Funktion "Compose"

Designs in Jetpack Compose bestehen aus verschiedenen untergeordneten Konstrukten und zugehörige APIs. Diese Informationen sind in der Quellcode von MaterialTheme und können auch in benutzerdefinierten Designsystemen verwendet werden.

Designsystemklassen

Ein Designthema besteht in der Regel aus einer Reihe von Teilsystemen, in denen häufige visuelle und verhaltensbezogene Konzepte gruppiert werden. Diese Systeme können mit Klassen modelliert werden, Themenwerte.

MaterialTheme enthält beispielsweise ColorScheme (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 Theme-Systems (lokal)

Designsystemklassen werden dem Kompositionsbaum implizit als CompositionLocal Instanzen. Dadurch kann in zusammensetzbaren Funktionen statisch auf Themenwerte verwiesen werden. Funktionen.

Weitere Informationen zu CompositionLocal findest du in der Leitfaden zu Daten auf lokaler Ebene im CompositionLocal-Leitfaden.

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. Es erstellt Instanzen der CompositionLocals des Themensystems – mithilfe von Realwerten und der erforderlichen Logik –, die dem Kompositionbaum mit CompositionLocalProvider zur Verfügung gestellt 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. Für -Konsistenz hat das Objekt tendenziell denselben Namen wie die Designfunktion. Die rufen die Properties einfach die aktuelle Zusammensetzung 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