Anatomia di un tema in Scrivi

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

Classi di sistema dei temi

In genere un tema è composto da una serie di sistemi che raggruppano concetti visivi e comportamentali comuni. Questi sistemi possono essere modellati con classi che hanno valori a tema.

Ad esempio, MaterialTheme include Colors (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 di Compose. Per saperne di più, consulta la guida Ciclo di vita dei prodotti 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

Composizione del sistema dei temi (locali)

Le classi di sistema dei temi vengono fornite implicitamente alla struttura di composizione come istanze CompositionLocal. Ciò consente di fare riferimento ai valori dei temi nelle funzioni componibili.

Per scoprire di più su CompositionLocal, consulta la guida sui dati con ambito locale con ComposizioneLocal.

Nota: puoi creare CompositionLocal di un corso con compositionLocalOf o staticCompositionLocalOf. Queste funzioni hanno una funzione lambda finale defaultFactory per fornire valori di fallback dello stesso tipo 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 è il punto di ingresso e l'API primaria. Costruisce istanze dei CompositionLocal del sistema di temi, utilizzando valori reali richiesti dalla logica, 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 del tema

L'accesso ai sistemi a tema avviene tramite un oggetto con proprietà di convenienza. Per coerenza, l'oggetto tende ad avere lo stesso nome della funzione del tema. Le proprietà semplicemente rendono locale la composizione attuale.

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