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).
@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 /* ... */ ) /* ... */
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.
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 = "" ) } /* ... */
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 ) }
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 /* ... */ }
Consigliato per te
- Nota: il testo del link viene visualizzato quando JavaScript è disattivato
- Dati con ambito locale con ComposizioneLocal
- Sistemi di progettazione personalizzata in Compose
- Material Design 2 in Compose