Os temas no Jetpack Compose são compostos por várias construções de nível mais baixo
e APIs relacionadas. Isso pode ser visto no
código-fonte
do MaterialTheme
e também pode ser aplicado em sistemas de design personalizado.
Classes do sistema de temas
Geralmente, um tema é composto por vários sistemas que agrupam conceitos visuais e comportamentais comuns. Esses sistemas podem ser modelados com classes que têm valores de tema.
Por exemplo, o MaterialTheme
inclui
Colors
(sistema de cores),
Typography
(sistema de tipografia) e
Shapes
(sistema de formas).
@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
/* ... */
)
/* ... */
Locais de composição do sistema de temas
As classes do sistema de temas são fornecidas implicitamente à árvore de composição como
instâncias
CompositionLocal
. Isso possibilita que os valores de temas sejam referenciados estaticamente em funções
que podem ser compostas.
Para saber mais sobre a CompositionLocal
, confira o
Guia de dados com escopo local na 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 = ""
)
}
/* ... */
Função do tema
A função do tema é o ponto de entrada e a API principal. Ela cria instâncias
da CompositionLocal
s do sistema de temas usando valores reais que qualquer lógica
exige. Esses valores são fornecidos na árvore de composição com
CompositionLocalProvider
.
O parâmetro content
possibilita que elementos que podem ser compostos aninhados acessem valores de tema
relacionados à hierarquia.
@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
)
}
Objeto de tema
O acesso aos sistemas de tema é feito por um objeto com propriedades de conveniência. Para consistência, o objeto tende a receber o mesmo nome da função do tema. As propriedades simplesmente recebem a composição local atual.
// 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
/* ... */
}