Audiocurso Jetpack Compose 4 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.

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. 😉