Темы в Jetpack Compose состоят из ряда конструкций более низкого уровня и связанных API. Их можно увидеть в исходном коде MaterialTheme
, а также можно применять в системах индивидуального дизайна.
Классы системы тем
Тема обычно состоит из ряда систем, группирующих общие визуальные и поведенческие концепции. Эти системы можно моделировать с помощью классов, имеющих значения тем.
Например, MaterialTheme
включает в себя Colors
(систему цвета), Typography
(систему оформления) и Shapes
(систему форм).
@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 /* ... */ ) /* ... */
Состав системы тем местные жители
Классы системы тем неявно предоставляются дереву композиции как экземпляры CompositionLocal
. Это позволяет статически ссылаться на значения тем в составных функциях.
Чтобы узнать больше о CompositionLocal
, ознакомьтесь с руководством по локальным данным с помощью 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 = "" ) } /* ... */
Функция темы
Функция темы — это точка входа и основной API. Он создает экземпляры системы тем CompositionLocal
s — используя реальные значения и любую необходимую логику — которые предоставляются дереву композиции с помощью CompositionLocalProvider
. Параметр content
позволяет вложенным компонуемым объектам получать доступ к значениям тем относительно иерархии.
@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 ) }
Объект темы
Доступ к системам тем осуществляется через объект с удобными свойствами. Для обеспечения единообразия объект имеет тенденцию называться так же, как функция темы. Свойства просто получают локальную текущую композицию.
// 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 /* ... */ }
Рекомендуется для вас
- Примечание: текст ссылки отображается, когда JavaScript отключен.
- Данные локального масштаба с помощью CompositionLocal
- Системы индивидуального дизайна в Compose
- Material Design 2 в Compose