Row en Jetpack Compose: qué es, propiedades composable y cómo funciona

Qué es Row en Jetpack Compose

Row es una función composable que coloca elementos secundarios en una secuencia horizontal. En la jerarquía de diseños de Compose, Row ocupa la posición de un contenedor básico junto con Column y Box.

Row no requiere especificar dimensiones — se ajusta automáticamente a su contenido. El ancho de Row es igual a la suma de los anchos de los elementos secundarios incluido el relleno, a menos que se especifique Modifier.fillMaxWidth o un tamaño fijo.

Los elementos secundarios de Row pueden tener sus propios modificadores que afectan su posición dentro del contenedor. Por ejemplo, Modifier.weight permite que los elementos ocupen una parte proporcional del espacio disponible.

Según Android Developers Blog, 2024, Row procesa los elementos secundarios secuencialmente, calculando sus tamaños según las reglas de medición de Compose: primero se miden los elementos sin weight, luego el espacio restante se distribuye entre los elementos con weight.

Sintaxis y firma básica de Row

La firma básica de Row incluye el parámetro modifier, horizontalArrangement y verticalAlignment. Todos los elementos secundarios se pasan en el bloque lambda de contenido final.

@Composable
fun RowExample() {
    Row(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        horizontalArrangement = Arrangement.SpaceEvenly,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(text = "Uno")
        Text(text = "Dos")
        Text(text = "Tres")
    }
}

Propiedades de Row: horizontalArrangement y verticalAlignment

El parámetro horizontalArrangement determina cómo se distribuyen los elementos secundarios a lo largo del eje horizontal dentro de Row. Los valores disponibles incluyen Start, End, Center, SpaceBetween, SpaceAround y SpaceEvenly de la clase Arrangement.

Arrangement.Start coloca los elementos al inicio del contenedor, Arrangement.End — al final, y Arrangement.Center — en el centro. Estos valores funcionan de manera similar a la propiedad justify-content en CSS Flexbox.

Arrangement.SpaceBetween distribuye los elementos uniformemente, colocando el primer elemento al inicio, el último al final y el resto con espacios iguales entre ellos. Según Material Design Guidelines, 2025, SpaceBetween es óptimo para barras de herramientas y filas de navegación.

El parámetro verticalAlignment alinea los elementos verticalmente. Los valores disponibles incluyen Alignment.Top, Alignment.CenterVertically y Alignment.Bottom. Esta propiedad es útil cuando los elementos de Row tienen diferentes alturas — por ejemplo, un icono junto a un texto de varias líneas.

Tabla de valores de Arrangement

Distribución del espacio con Modifier.weight

Modifier.weight es un modificador disponible solo dentro de Row y Column que distribuye el espacio disponible entre los elementos secundarios proporcionalmente al valor especificado. Si un elemento tiene un peso de 1.0f y otro de 2.0f, el segundo elemento ocupará el doble de espacio.

Los elementos sin weight ocupan el espacio necesario para su contenido. El espacio restante se distribuye entre los elementos con weight proporcionalmente a su peso. Este comportamiento es similar a la propiedad flex-grow en CSS Flexbox.

Según Android Developer Documentation, 2025, el weight funciona solo dentro de Row, Column y BoxWithConstraints. Al usar weight en Row, todos los elementos secundarios se miden en dos pasos: primero los elementos sin weight, luego los elementos con weight.

@Composable
fun WeightExample() {
    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.Start
    ) {
        Text(
            text = "Izquierda",
            modifier = Modifier.weight(1.0f)
        )
        Text(text = "Derecha")
    }
}

Ejemplos de código con Row

El primer ejemplo demuestra Row con un icono y texto — un escenario típico para una lista de contactos o configuración. Icon y Text se envuelven en Row con verticalAlignment centrado.

@Composable
fun IconWithText() {
    Row(
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier.padding(8.dp)
    ) {
        Icon(
            imageVector = Icons.Default.Favorite,
            contentDescription = "Favorite"
        )
        Spacer(modifier = Modifier.width(8.dp))
        Text(text = "Agregar a favoritos")
    }
}

El segundo ejemplo muestra Row con botones y distribución uniforme. SpaceEvenly garantiza un espaciado igual entre todos los botones y los bordes del contenedor.

@Composable
fun ButtonRow() {
    Row(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        horizontalArrangement = Arrangement.SpaceEvenly
    ) {
        Button(onClick = {}) { Text("Cancelar") }
        Button(onClick = {}) { Text("Guardar") }
    }
}

El tercer ejemplo — Row dentro de una Card para mostrar una calificación. Un Row anidado con Modifier.weight permite que la estrella de calificación y el valor numérico ocupen un espacio fijo.

@Composable
fun RatingRow(rating: Float) {
    Row(
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(
            text = "Calificación:",
            modifier = Modifier.weight(1.0f)
        )
        Text(text = "$rating / 5.0")
    }
}

Características de Row en diseño adaptativo

Row requiere control de ancho en diseño adaptativo. Si el contenido de Row supera el ancho disponible de la pantalla, los elementos pueden desbordar los límites del contenedor. Para evitarlo, use Modifier.horizontalScroll o cambie a Column.

Al combinar Row con Modifier.weight, es importante establecer fillMaxWidth en el Row padre — de lo contrario, el weight distribuirá espacio inexistente. Según Material Design Guidelines, 2025, Row con weight sin fillMaxWidth se considera una configuración no válida.

Para interfaces adaptativas, se recomienda combinar Row con Box o usar Arrangement.SpaceBetween para la distribución automática de elementos en diferentes tamaños de pantalla. Esto proporciona flexibilidad sin consultas de medios.

• Modifier.horizontalScroll — añade desplazamiento cuando Row se desborda
• Modifier.weight — distribuye el espacio proporcionalmente
• Arrangement.SpaceBetween — distribución adaptativa con fijación en los bordes