Conceptos básicos de Text y Column

Lo más básico que puede mostrar en Compose es texto. El composable Text dibuja una cadena en la pantalla.

Se pasa como primer argumento la cadena que se desea mostrar. Eso es todo lo necesario para colocar palabras en pantalla.

Text acepta parámetros para cambiar su apariencia. Puede establecer fontSize, color y fontWeight.

Los tamaños utilizan la unidad sp, que se adapta a la configuración de fuente del usuario. Así, la aplicación resulta legible para todos.

Si llama a Text dos veces seguidas, ambas partes del texto aparecen en el mismo lugar, una sobre otra. Los composables no se organizan automáticamente.

Para colocar los elementos en orden, necesita un composable de diseño que organice sus elementos secundarios. El más habitual para apilar verticalmente es Column.

Column organiza sus elementos secundarios verticalmente, uno debajo de otro. Los composables secundarios se colocan dentro de su bloque lambda final.

Cada composable que escriba entre las llaves se convierte en una fila de esa pila vertical, en el orden en que lo escriba.

Dentro de un Column, los elementos secundarios aparecen de arriba abajo exactamente en el orden en que se enumeran. Si mueve una línea hacia arriba en el código, también sube en la pantalla.

Esto hace que los diseños sean predecibles: lea el código de arriba abajo y sabrá cómo se ve la pantalla de arriba abajo.

Column puede controlar el espacio entre sus elementos secundarios mediante verticalArrangement. Por ejemplo, Arrangement.spacedBy añade espacios uniformes.

Esto es más limpio que añadir espacio manualmente a cada elemento y mantiene la coherencia del diseño.

De forma predeterminada, un Column alinea sus elementos secundarios al inicio (a la izquierda). Use horizontalAlignment para centrarlos o alinearlos al final.

Establézcalo en Alignment.CenterHorizontally para centrar cada elemento dentro del ancho de la columna.

Column apila los elementos verticalmente; su elemento hermano, Row, organiza los elementos secundarios uno al lado del otro, horizontalmente. Comparten la misma idea, pero en direcciones diferentes.

Combinará Rows y Columns para crear cuadrículas y tarjetas. Por ahora, recuerde: Column va hacia abajo y Row, de lado a lado.

Los diseños pueden contener otros diseños. Puede colocar un Row dentro de un Column para crear diseños más completos.

Aquí, una columna muestra un título y, debajo, una fila con dos fragmentos de texto. El anidamiento permite crear pantallas complejas a partir de elementos sencillos.

Para añadir un espacio fijo entre dos composables, puede insertar un Spacer. Es un composable vacío que simplemente ocupa espacio.

Asígnele una altura mediante un modificador y empujará el elemento siguiente hacia abajo. Exploraremos los modificadores con más detalle en la próxima lección.

Con Text y Column ya puede crear una pantalla sencilla con etiquetas. Apile un encabezado y un par de líneas de detalle.

Este pequeño patrón es la base de prácticamente todas las pantallas de Compose que escribirá.

Comprobemos si ha entendido la dirección del diseño.

Ha aprendido a mostrar cadenas con Text y a aplicarles estilos mediante fontSize y fontWeight. Un Column apila los elementos secundarios verticalmente en el orden del código, mientras que un Row los organiza horizontalmente.

Puede controlar el espaciado con verticalArrangement o un Spacer, y alinear los elementos secundarios con horizontalAlignment. Anidar Rows y Columns permite crear diseños más completos. A continuación, obtendrá una vista previa de estas pantallas sin ejecutar la aplicación.