Anatomia di un tema in Scrivi

I temi di Jetpack Compose sono costituiti da una serie di costrutti di livello inferiore e API correlate. Puoi vederli nel codice sorgente di MaterialTheme e può essere applicata anche in sistemi di progettazione personalizzati.

Classi del sistema di temi

Un tema è generalmente composto da una serie di sottosistemi che raggruppano elementi visivi e concetti comportamentali. Questi sistemi possono essere modellati con classi che hanno dei temi.

Ad esempio, MaterialTheme include ColorScheme (sistema di colori), Typography (sistema tipografico) e Shapes (sistema di forme).

@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

Composizione del sistema di temi locali

Le classi di sistema di temi vengono fornite implicitamente all'albero di composizione come CompositionLocal. Ciò consente di fare riferimento in modo statico ai valori dei temi nei funzioni.

Per scoprire di più su CompositionLocal, consulta le Dati con ambito locale con la guida ComposeLocal.

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

Funzione tema

La funzione tema è il punto di ingresso e l'API principale. Costruisce istanze del sistema di temi CompositionLocal, utilizzando valori reali qualsiasi logica obbligatori, forniti all'albero di composizione con CompositionLocalProvider Il parametro content consente agli elementi componibili nidificati di accedere ai valori dei temi rispetto alla gerarchia.

@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

Oggetto tema

L'accesso ai sistemi di temi avviene utilizzando un oggetto con proprietà di convenienza. Per tendenzialmente, l'oggetto tende ad avere lo stesso nome della funzione del tema. La ottenere semplicemente la composizione corrente locale.

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