Анатомия темы в Compose

Темы в Jetpack Compose состоят из ряда низкоуровневых конструкций и связанных с ними API. Их можно увидеть в исходном коде MaterialTheme , а также использовать в пользовательских системах дизайна.

Классы системы тем

Тема обычно состоит из ряда подсистем, объединяющих общие визуальные и поведенческие концепции. Эти системы могут быть смоделированы с помощью классов, имеющих значения, определяющие тему.

Например, MaterialTheme включает в себя ColorScheme (система цветов), 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 = ""
    )
}

/* ... */

Функция темы

Функция theme является точкой входа и основным API. Она создает экземпляры CompositionLocal системы тем — используя реальные значения и необходимую логику — которые передаются дереву композиций с помощью 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
    /* ... */
}

{% verbatim %} {% endverbatim %} {% verbatim %} {% endverbatim %}