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 鈫欙笍
Masterclass
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. 馃槈