Qué es un Composable

En Jetpack Compose, las pantallas se crean escribiendo funciones, no inflando diseños XML. Un composable es simplemente una función de Kotlin que describe una parte de la interfaz de usuario.

Estas funciones se marcan con la anotación @Composable. Esto indica al compilador de Compose que la función puede emitir UI y llamar a otras funciones composable.

Añadir @Composable encima de una función activa las capacidades de Compose. Dentro de ella, puede llamar a otros composables, como Text o Column.

Por convención, los nombres de las funciones composable empiezan con una letra mayúscula, igual que las clases. Esto facilita identificar las funciones de UI en el código.

Un composable no devuelve un objeto View. En su lugar, emite UI como efecto secundario cuando Compose lo ejecuta. Solo tiene que describir lo que debe aparecer en pantalla.

Este estilo se denomina declarativo: se indica cómo debe verse la UI para los datos actuales y Compose determina cómo dibujarla.

La verdadera potencia proviene de la composición anidada. Un composable puede llamar a otros composables, lo que permite crear pantallas complejas a partir de piezas pequeñas y reutilizables.

Aquí, un composable principal llama a un composable secundario. Compose los ejecuta de arriba abajo y organiza la UI emitida.

La mayoría de los composables devuelven Unit, lo que significa que no devuelven nada útil. Su función es emitir UI, no devolver un valor.

Por eso se llama a un composable por su efecto en la pantalla, no para capturar un resultado. Esto es diferente de las funciones normales, pero pronto resulta natural.

Los composables pueden recibir parámetros, igual que las funciones normales de Kotlin. Esto permite que el mismo composable muestre datos diferentes.

Aquí, Greeting acepta un name y lo muestra. Pasar los datos como entrada hace que los composables sean flexibles y reutilizables en toda la aplicación.

Como los composables son funciones, puede llamar a uno varias veces con argumentos diferentes. Cada llamada emite su propia copia de la UI.

Así evita repetirse: escriba la UI una vez y reutilícela donde la necesite.

Los composables se colocan dentro de la actividad de Android mediante setContent. Ese bloque es el punto de entrada en el que Compose toma el control de la pantalla.

Dentro de setContent, llama a su composable de nivel superior, y todo lo que este emite se convierte en la UI de la aplicación.

Cuando cambian los datos que lee un composable, Compose vuelve a ejecutar esa función para actualizar la pantalla. Esta nueva ejecución se denomina recomposición.

No tiene que actualizar la UI manualmente. Cambie los datos y Compose recompondrá automáticamente los composables afectados. Así la pantalla se mantiene sincronizada con el estado.

Una buena práctica consiste en hacer que cada composable realice una tarea clara. Los composables pequeños y centrados son más fáciles de leer, probar y reutilizar.

Si una función crece demasiado, divídala en composables más pequeños y llámelos conjuntamente. Su yo del futuro se lo agradecerá.

Los composables proceden de las bibliotecas de Compose. A menudo importará androidx.compose.runtime.Composable para la anotación y androidx.compose.material3.Text para el texto.

Android Studio suele añadir estas importaciones por usted. Saber de dónde proceden resulta útil cuando falta una importación.

Repasemos qué hace que una función sea un composable.

Ha aprendido que un composable es una función de Kotlin marcada con @Composable que describe la UI de forma declarativa. Los composables pueden recibir parámetros, llamar a otros composables y se nombran con mayúscula inicial.

Devuelven Unit y emiten UI en lugar de devolver un valor. Cuando cambian los datos, Compose los recompone para actualizar la pantalla. A continuación, mostrará texto real y apilará vistas con Column.