Anatomia di un tema in Scrivi

I temi in Jetpack Compose sono costituiti da una serie di costrutti di livello inferiore e API correlate. Questi possono essere visualizzati nel codice sorgente di MaterialTheme e possono essere applicati anche nei sistemi di progettazione personalizzati.

Classi di sistema dei temi

Un tema è in genere composto da una serie di sottosistemi che raggruppano concetti visivi e comportamentali comuni. Questi sistemi possono essere modellati con classi che hanno valori di temi.

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

Nota: le classi devono essere annotate con Stable o @Immutable per fornire informazioni al compilatore Compose. Per saperne di più, consulta la Guida al ciclo di vita dei componenti componibili.

@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

Theme system composition locals

Le classi di sistema del tema vengono fornite implicitamente all'albero di composizione come istanze di CompositionLocal. Ciò consente di fare riferimento staticamente ai valori dei temi nelle funzioni componibili.

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

Nota: puoi creare il CompositionLocal di un corso con compositionLocalOf o staticCompositionLocalOf. Queste funzioni hanno una lambda finale defaultFactory per fornire valori di riserva dello stesso tipo di quelli che forniscono. È consigliabile utilizzare valori predefiniti ragionevoli come Color.Unspecified, TextStyle.Default e così via.

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 del tema

La funzione del tema è l'entry point e l'API principale. Costruisce istanze del sistema di temi CompositionLocals, utilizzando valori reali e qualsiasi logica richiesta, che vengono fornite all'albero di composizione con CompositionLocalProvider. Il parametro content consente ai composable nidificati di accedere ai valori dei temi relativi 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 viene eseguito utilizzando un oggetto con proprietà di convenienza. Per coerenza, l'oggetto tende ad avere lo stesso nome della funzione del tema. Le proprietà ottengono semplicemente la composizione locale corrente.

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