Темы в 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 = ""
)
}
/* ... */
Функция темы
Функция темы — это точка входа и основной 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
/* ... */
}
Пока рекомендаций нет.
Попытайтесь войти в свой аккаунт Google.