Audiocurso Jetpack Compose 4 Row

jetpack compose row

Audiocurso Jetpack Compose 4 Row

En los antiguos XMLs cuando quer铆amos disponer unos elementos de izquierda a derecha, pod铆amos usar un LinearLayout con orientaci贸n horizontal. Ahora, usamos un Row.

Y la verdad es que es sencillo de acordarse. Ya que es eso, una fila.

Este contenido est谩 restringido.
HAZTE PREMIUM
para difrutar de los audios y v铆deos exclusivos.

Caracter铆sticas

En un Box, los elementos que hay dentro, se alinean con respecto al padre.

Ahora, lo hacen con respecto a sus hermanos.

Por lo tanto, tendremos una fila de elementos.

La disposici贸n de estos, se indica con horizontalArrangement.

Y la alineaci贸n, con verticalAlignment.

Todo con much铆simo sentido como ves. 馃槉

Ya que por un lado, los elementos se disponen entre hermanos en horizontal y se alinean en vertical.

Un ejemplo muy sencillo podr铆a ser este:

Row(     modifier = Modifier         .padding(16.dp)         .fillMaxWidth(),     horizontalArrangement = Arrangement.Start,     verticalAlignment = Alignment.CenterVertically ) {     Composable1()     Composable2() }

Si quieres visualizar esto r谩pidamente con una preview en Android Studio, copia y pega el siguiente c贸digo:

@Preview(showBackground = true) @Composable fun DefaultPreview() {     Row(         modifier = Modifier             .padding(16.dp)             .fillMaxWidth(),         horizontalArrangement = Arrangement.Start,         verticalAlignment = Alignment.CenterVertically     ) {         Composable1()         Composable2()     } }  @Composable fun Composable1() {     Text(text = "Composable 1") }  @Composable fun Composable2() {     Text(text = "Composable 2") }

Deber铆as visualizar algo tal que as铆:

Como ves, hemos dejado un peque帽o padding con padding(16.dp) para ser capaces de distinguir la disposici贸n y la alineaci贸n.

Luego le hemos indicado que ocupe todo el ancho con fillMaxWidth().

Posteriormente, que la disposici贸n empiece desde el principio con Arrangement.Start. Izquierda en LTR (Left-to-Right).

Y finalmente, que la alineaci贸n est茅 centrada verticalmente empleando Alignment.CenterVertically.

Ojo, que si le hubi茅ramos dicho 煤nicamente Alignment.Center, nos hubiera saltado un error de compilaci贸n. Ya que el verticalAlignment espera un Alignment.Vertical. Y Alignment.Center, es un Alignment a secas.

Te invito a que lo compruebes por ti mism@.

En el siguiente tema, tocaremos el equivalente a este pero en vertical, el Column. 馃槈

Publicado: 2022-10-27 Actualizado: 2023-08-05