En Jetpack Compose, los temas se componen de varias construcciones de nivel inferior y API relacionadas. Estos elementos se pueden ver en el código fuente de MaterialTheme
y también se pueden aplicar en sistemas de diseño personalizados.
Clases del sistema de temas
Por lo general, un tema está compuesto por varios sistemas que agrupan conceptos visuales y de comportamiento comunes. Esos sistemas se pueden modelar con clases que tienen valores de temas.
Por ejemplo, MaterialTheme
incluye Colors
(sistema de colores), Typography
(sistema de tipografía) y 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
/* ... */
)
/* ... */
Composición local del sistema de temas
Las clases del sistema de temas se proporcionan de forma implícita al árbol de composición como instancias de CompositionLocal
. Esto permite que se haga referencia de manera estática a los valores de tema en las funciones que admiten composición.
Si quieres obtener más información acerca de CompositionLocal
, consulta la Guía de alcance local con composición de 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 = ""
)
}
/* ... */
Función de tema
La función de tema es el punto de entrada y la API principal. Construye instancias de los CompositionLocal
de los sistemas de temas, mediante valores reales de cualquier lógica necesaria, que se proporcionan al árbol de composición con CompositionLocalProvider
.
El parámetro content
permite que los elementos componibles anidados accedan a los valores de temas relacionados con la jerarquía.
@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
El acceso a los sistemas de temas se realiza mediante un objeto con propiedades útiles. Para mantener la coherencia, el objeto tiende a llamarse de la misma forma que la función del tema. Las propiedades simplemente obtienen la composición actual de forma local.
// 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
/* ... */
}