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.

Los miembros de "Los androides Premium" escuchan contenido adicional en audio sobre este art铆culo... 隆y otros m谩s de 100!

Suena muy bien

Hay que suscribirse para disfrutar de todo el contenido premium desde la web y la app, as铆 como participar en las actividades premium: videoconferencias y canales premium en Discord.

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