Designs in Jetpack Compose bestehen aus verschiedenen untergeordneten Konstrukten
und zugehörige APIs. Diese Informationen sind in der
Quellcode
von MaterialTheme
und können auch in benutzerdefinierten Designsystemen verwendet werden.
Designsystemklassen
Ein Thema besteht in der Regel aus einer Reihe von Systemen, Verhaltenskonzepten. Diese Systeme können mit Klassen modelliert werden, Themenwerte.
MaterialTheme
enthält 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 Theme-Systems (lokal)
Designsystemklassen werden dem Kompositionsbaum implizit als
CompositionLocal
Instanzen. Dadurch kann in zusammensetzbaren Funktionen statisch auf Themenwerte verwiesen werden.
Funktionen.
Weitere Informationen zu CompositionLocal
findest du in der
Leitfaden zu Daten auf lokaler Ebene im CompositionLocal-Leitfaden.
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. Es erstellt Instanzen.
der Themensystem-CompositionLocal
s unter Verwendung von reellen Werten und beliebiger Logik
erforderlich – werden für den Kompositionsbaum mit
CompositionLocalProvider
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. Für -Konsistenz hat das Objekt tendenziell denselben Namen wie die Designfunktion. Die rufen die Properties einfach die aktuelle Zusammensetzung 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.
- Daten auf lokaler Ebene mit CompositionLocal
- Benutzerdefinierte Designsysteme in Compose
- Material Design 2 in Compose