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 in 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 tematizzazione.

Ad esempio, MaterialTheme include ColorScheme (sistema di colori), Typography (sistema di tipografia) 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 sul ciclo di vita dei 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 del sistema di temi vengono fornite implicitamente all'albero di composizione come istanze di CompositionLocal. In questo modo, è possibile 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 un 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. Crea istanze del sistema di temi CompositionLocal, utilizzando valori reali e qualsiasi logica richiesta, che vengono fornite all'albero di composizione con CompositionLocalProvider. Il parametro content consente ai componibili 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 avviene utilizzando un oggetto con proprietà di convenienza. Per coerenza, l'oggetto tende ad avere lo stesso nome della funzione del tema. Le proprietà recuperano semplicemente il CompositionLocal 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