Construir composables en Jetpack Compose se parece a jugar con Legos: apilas piezas pequeñas hasta levantar una pantalla completa. Aquí descubrirás cómo crear tus primeros composables, aplicar modifiers, previsualizarlos y combinarlos en filas y columnas para diseñar interfaces modulares en Android.

¿Qué es un composable y cómo se declara?

Un composable es una función anotada con @Composable que describe un trozo de UI. Piensa en cada uno como una ficha de Lego: tiene forma, propiedades y se conecta con otras para formar pantallas.

El primer ejercicio clásico es un Hello, world. Dentro de una carpeta components se crea un archivo Playground.kt y se declara la función con la anotación correspondiente, usando el componente básico Text, que recibe un parámetro principal: el texto a mostrar [3:08].

¿Qué hace la anotación @Composable? Marca una función como una pieza de UI declarativa que Compose puede dibujar y recomponer cuando cambian sus datos.

¿Para qué sirve el modifier en un composable?

El modifier ajusta las propiedades visuales y de posición de cada ficha. Es una práctica obligatoria recibirlo como parámetro en cualquier composable propio, porque permite que un componente padre afecte el comportamiento desde fuera [4:32].

Un detalle clave: el orden de los operadores en un modifier importa. Si aplicas primero padding y luego background, el color solo cubrirá el área interna. Si inviertes el orden, el fondo abarca todo el componente y el espaciado se aplica después [6:48].

¿Cómo previsualizar composables sin ejecutar la app?

La anotación @Preview permite ver el resultado en el panel lateral del IDE sin recompilar la aplicación completa. Basta con envolver el composable dentro del tema del proyecto, por ejemplo TodoAppTheme, y activar showBackground = true para una vista más clara [5:35].

Desde la parte superior derecha del editor se selecciona la opción Split y aparece la previsualización en tiempo real. Esto agiliza la iteración visual mientras escribes código.

¿Cómo manejar interacciones y estado en Compose?

Un texto puede volverse interactivo agregando el modifier clickable. Pero si intentas cambiar una variable String normal al hacer clic, no pasa nada en pantalla.

La razón es que Compose necesita un estado observable para disparar la recomposición, el proceso que vuelve a dibujar el componente con los nuevos datos. Para eso se usa mutableStateOf, que envuelve la variable y notifica cualquier cambio [9:30].

¿Qué es la recomposición en Jetpack Compose? Es el proceso por el cual un composable se vuelve a ejecutar cuando cambia un estado, redibujando la UI con los datos nuevos.

¿Cómo probar interacciones desde el preview?

El panel de preview incluye un botón llamado Start interactive mode que permite hacer clic, escribir y simular gestos sin levantar el emulador. Es ideal para validar comportamientos rápidos como el cambio de texto al pulsar un componente.

¿Cómo construir layouts con Row, Column e iconos?

Una vez tienes fichas individuales, puedes apilarlas. Row distribuye elementos horizontalmente y Column lo hace de forma vertical. Ambas aceptan modificadores y propiedades de alineación.

Para un icono se usa el composable Icon con un ImageVector proveniente de Icons.Default, por ejemplo Favorite. Siempre conviene incluir un contentDescription para accesibilidad y, si lo deseas, un border con RoundedCornerShape para darle forma circular o cuadrada [13:20].

¿Qué propiedades clave ofrecen Row y Column?

Estas son las configuraciones más útiles para distribuir contenido:

• verticalAlignment = Alignment.CenterVertically en Row para alinear los hijos al centro vertical.
• horizontalAlignment = Alignment.CenterHorizontally en Column para centrar los hijos horizontalmente.
• horizontalArrangement = Arrangement.spacedBy(8.dp) para separar elementos con una distancia fija.
• Spacer con peso para empujar componentes hacia los extremos.

Después de configurar la alineación, los iconos y textos quedan ordenados visualmente sin saltos extraños, y el resultado se ve igual a un boceto en papel [16:10].

¿Cómo probar un composable con varios datos a la vez?

Crear múltiples previews para cada variante es tedioso. La solución es usar @PreviewParameter con una clase que implemente PreviewParameterProvider.

El patrón funciona así:

1. Define una data class contenedora, por ejemplo IconContainer, que reciba un ImageVector.
2. Crea una clase IconProvider : PreviewParameterProvider<IconContainer> y sobreescribe values devolviendo un sequenceOf con los iconos a probar como More, Star o Search.
3. Anota el parámetro del preview con @PreviewParameter(IconProvider::class) para que Compose renderice una vista por cada valor [19:45].

Esta técnica acelera la validación visual en light mode y dark mode antes de correr la app en un dispositivo real.

¿Por qué pensar los composables como piezas de Lego?

Cada composable encapsula una responsabilidad pequeña: un texto, un icono, una fila. Al combinarlos se forman pantallas complejas sin perder claridad ni mantenibilidad. La regla de oro es declarar siempre un modifier por defecto en cada función, separar argumentos con coma y respetar el orden de los modificadores.

Experimenta con colores, fontWeight = FontWeight.Bold, tamaños en sp para texto y dp para dimensiones, y diferentes combinaciones de Row y Column. Cuéntame en los comentarios qué composable creaste primero y qué modificador te sorprendió más.