Themen in Jetpack Compose bestehen aus einer Reihe von untergeordneten Konstrukten und zugehörigen APIs. Sie finden sie im Quellcode von MaterialTheme
und können auch in benutzerdefinierten Designsystemen angewendet werden.
Theme-Systemklassen
Ein Thema besteht in der Regel aus einer Reihe von Systemen, die gängige visuelle und verhaltensbezogene Konzepte gruppieren. Diese Systeme können mit Klassen modelliert werden, die Themenwerte haben.
MaterialTheme
umfasst beispielsweise Colors
(Farbsystem), Typography
(Typografiesystem) und Shapes
(Formsystem).
@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 /* ... */ ) /* ... */
Zusammensetzung des Themensystems – lokale
Theme-Systemklassen werden dem Zusammensetzungsbaum implizit als CompositionLocal
-Instanzen bereitgestellt. Dadurch können Designwerte in zusammensetzbaren Funktionen statisch referenziert werden.
Weitere Informationen zu CompositionLocal
finden Sie im Leitfaden für lokal zugeordnete Daten mit CompositionLocal.
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 = "" ) } /* ... */
Designfunktion
Die Designfunktion ist der Einstiegspunkt und die primäre API. Sie erstellt Instanzen der CompositionLocal
s des Themensystems unter Verwendung von realen Werten jeder erforderlichen Logik, die dem Zusammensetzungsbaum mit CompositionLocalProvider
bereitgestellt werden.
Der Parameter content
ermöglicht verschachtelten zusammensetzbaren Funktionen den Zugriff auf Themenwerte relativ zur Hierarchie.
@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 ) }
Designobjekt
Der Zugriff auf Themensysteme erfolgt über ein Objekt mit praktischen Eigenschaften. Aus Konsistenzgründen wird das Objekt tendenziell so benannt wie die Theme-Funktion. Die Eigenschaften rufen einfach die aktuelle Zusammensetzung lokal ab.
// 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 /* ... */ }
Empfehlungen für dich
- Hinweis: Der Linktext wird angezeigt, wenn JavaScript deaktiviert ist.
- Lokalisierte Daten mit CompositionLocal
- Benutzerdefinierte Designsysteme in Compose
- Material Design 2 in Compose