Motywy w Jetpack Compose składają się z wielu konstrukcji niższego poziomu i powiązanych z nimi interfejsów API. Można je zobaczyć w kodzie źródłowym pakietu MaterialTheme
i można je stosować w systemach do projektowania niestandardowego.
Klasy systemu motywów
Motyw zwykle składa się z szeregu systemów, które łączą typowe koncepcje wizualne i behawioralne. Systemy te można modelować za pomocą klas, które mają wartości tematyczne.
Na przykład MaterialTheme
zawiera Colors
(system kolorów), Typography
(system typograficzny) i Shapes
(system kształtów).
@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 /* ... */ ) /* ... */
Lokalne kompozycje systemu motywów
Klasy systemu motywów są domyślnie udostępniane do drzewa kompozycji jako wystąpienia CompositionLocal
. Dzięki temu w funkcjach kompozycyjnych można stosować statyczne odwołania do wartości tematycznych.
Aby dowiedzieć się więcej na temat: CompositionLocal
, przeczytaj
dane o zakresie lokalnym dzięki CompositionLocal Guide.
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 = "" ) } /* ... */
Funkcja motywu
Funkcja motywu to punkt wejścia i podstawowy interfejs API. Tworzy wystąpienia elementów CompositionLocal
systemu motywów, korzystając z rzeczywistych wartości, jakakolwiek wymagana logika, podanych do drzewa kompozycji za pomocą funkcji CompositionLocalProvider
.
Parametr content
umożliwia zagnieżdżonym elementom kompozycyjnym dostęp do wartości ich kolejności względem hierarchii.
@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 ) }
Obiekt motywu
Dostęp do systemów motywów odbywa się za pomocą obiektu z właściwościami dogodnymi. Aby zachować spójność, obiekt powinien mieć taką samą nazwę jak funkcja motywu. Właściwości powodują tylko pobranie bieżącej kompozycji lokalnie.
// 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 /* ... */ }
Polecane dla Ciebie
- Uwaga: tekst linku jest wyświetlany, gdy JavaScript jest wyłączony
- Dane o zakresie lokalnym w CompositionLocal
- Niestandardowe systemy projektowania w usłudze Compose
- Material Design 2 w obszarze Utwórz