Анатомия темы в 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(
        value
1 = 0,
        value
2 = ""
   
)
}

/* ... */

Функция темы

Функция темы — это точка входа и основной 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(
        value
1 = 1000,
        value
2 = "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
   
/* ... */
}

{% дословно %}

Пока рекомендаций нет.

Попытайтесь в свой аккаунт Google.

{% дословно %}