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.
馃敟 Descubre el SISTEMA con el que +170 ANDROID Developers han mejorado su situaci贸n laboral 鈫欙笍
SISTEMA ANDROID
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. 馃槈