Diseños de flujo en Compose

FlowRow y FlowColumn son funciones de componibilidad similares a Row y Column, pero difieren en que los elementos fluyen a la siguiente línea cuando el contenedor se queda sin espacio. Esto crea varias filas o columnas. La cantidad de elementos de una línea también se puede controlar configurando maxItemsInEachRow o maxItemsInEachColumn. A menudo, puedes usar FlowRow y FlowColumn para compilar diseños responsivos: el contenido no se cortará si los elementos son demasiado grandes para una dimensión, y usar una combinación de maxItemsInEach* con Modifier.weight(weight) puede ayudar a compilar diseños que llenen o expandan el ancho de una fila o columna cuando sea necesario.

El ejemplo típico es para una IU de chip o de filtrado:

Figura 1: Ejemplo de FlowRow

Uso básico

Para usar FlowRow o FlowColumn, crea estos elementos componibles y coloca los elementos dentro de ellos que deben seguir el flujo estándar:

@Composable
private fun FlowRowSimpleUsageExample() {
    FlowRow(modifier = Modifier.padding(8.dp)) {
        ChipItem("Price: High to Low")
        ChipItem("Avg rating: 4+")
        ChipItem("Free breakfast")
        ChipItem("Free cancellation")
        ChipItem("£50 pn")
    }
}
FlowLayoutSnippets.kt

Este fragmento genera la IU que se muestra arriba, con elementos que fluyen automáticamente a la siguiente fila cuando no hay más espacio en la primera.

Funciones del diseño de flujo

Los diseños de flujo tienen las siguientes funciones y propiedades que puedes usar para crear diferentes diseños en tu app.

Disposición del eje principal: horizontal o vertical

El eje principal es el eje en el que se disponen los elementos (por ejemplo, en FlowRow, los elementos se organizan de forma horizontal). El parámetro horizontalArrangement en FlowRow controla la forma en que se distribuye el espacio libre entre los elementos.

En la siguiente tabla, se muestran ejemplos de configuración de horizontalArrangement en elementos para FlowRow:

Se estableció la disposición horizontal en FlowRow	Resultado
Arrangement.Start (Default)
Arrangement.SpaceBetween
Arrangement.Center
Arrangement.End
Arrangement.SpaceAround
Arrangement.spacedBy(8.dp)

Para FlowColumn, hay opciones similares disponibles con verticalArrangement, con el valor predeterminado de Arrangement.Top.

Disposición del eje transversal

El eje transversal es el eje en la dirección opuesta al eje principal. Por ejemplo, en FlowRow, este es el eje vertical. Para cambiar la forma en que se organiza el contenido general dentro del contenedor en el eje transversal, usa verticalArrangement para FlowRow y horizontalArrangement para FlowColumn.

Para FlowRow, en la siguiente tabla, se muestran ejemplos de cómo configurar diferentes verticalArrangement en los elementos:

Se estableció la disposición vertical en FlowRow	Resultado
Arrangement.Top (Default)
Arrangement.Bottom
Arrangement.Center

Para FlowColumn, hay opciones similares disponibles con horizontalArrangement. La disposición predeterminada del eje transversal es Arrangement.Start.

Alineación de elementos individuales

Es posible que quieras posicionar elementos individuales dentro de la fila con diferentes alineaciones. Esto es diferente de verticalArrangement y horizontalArrangement, ya que alinea los elementos dentro de la línea actual. Puedes aplicar esto con Modifier.align().

Por ejemplo, cuando los elementos de un FlowRow tienen diferentes alturas, la fila toma la altura del elemento más grande y aplica Modifier.align(alignmentOption) a los elementos:

Se estableció la alineación vertical en FlowRow	Resultado
Alignment.Top (Default)
Alignment.Bottom
Alignment.CenterVertically

Para FlowColumn, hay opciones similares disponibles. La alineación predeterminada es Alignment.Start.

Cantidad máxima de elementos en una fila o columna

Los parámetros maxItemsInEachRow o maxItemsInEachColumn definen la cantidad máxima de elementos en el eje principal que se permiten en una línea antes de pasar a la siguiente. El valor predeterminado es Int.MAX_INT, que permite tantos elementos como sea posible, siempre que sus tamaños les permitan caber en la línea.

Por ejemplo, si configuras un maxItemsInEachRow, se fuerza el diseño inicial para que solo tenga 3 elementos:

No se estableció un máximo	maxItemsInEachRow = 3

Pesos de los elementos

El peso aumenta un elemento según su factor y el espacio disponible en la línea en la que se colocó. Es importante destacar que existe una diferencia entre FlowRow y Row en cuanto a cómo se usan los pesos para calcular el ancho de un elemento. Para Rows, el peso se basa en todos los elementos de Row. Con FlowRow, el peso se basa en los elementos de la línea en la que se coloca un elemento, no en todos los elementos del contenedor FlowRow.

Por ejemplo, si tienes 4 elementos que se encuentran en una línea, cada uno con diferentes pesos de 1f, 2f, 1f y 3f, el peso total es 7f. El espacio restante en una fila o columna se dividirá por 7f. Luego, el ancho de cada elemento se calculará con weight * (remainingSpace / totalWeight).

Puedes usar una combinación de Modifier.weight y elementos máximos con FlowRow o FlowColumn para crear un diseño similar a una cuadrícula. Este enfoque es útil para crear diseños responsivos que se ajusten al tamaño de tu dispositivo.

Estos son algunos ejemplos de lo que puedes lograr con las ponderaciones. Un ejemplo es una cuadrícula en la que los elementos tienen el mismo tamaño, como se muestra a continuación:

Figura 2: Usa FlowRow para crear una cuadrícula

Para crear una cuadrícula de elementos de igual tamaño, puedes hacer lo siguiente:

val rows = 3
val columns = 3
FlowRow(
    modifier = Modifier.padding(4.dp),
    horizontalArrangement = Arrangement.spacedBy(4.dp),
    maxItemsInEachRow = rows
) {
    val itemModifier = Modifier
        .padding(4.dp)
        .height(80.dp)
        .weight(1f)
        .clip(RoundedCornerShape(8.dp))
        .background(MaterialColors.Blue200)
    repeat(rows * columns) {
        Spacer(modifier = itemModifier)
    }
}
FlowLayoutSnippets.kt

Es importante destacar que, si agregas otro elemento y lo repites 10 veces en lugar de 9, el último elemento ocupará toda la última columna, ya que el peso total de toda la fila es 1f:

Figura 3: Usa FlowRow para crear una cuadrícula en la que el último elemento ocupe todo el ancho

Puedes combinar pesos con otros Modifiers, como Modifier.width(exactDpAmount), Modifier.aspectRatio(aspectRatio) o Modifier.fillMaxWidth(fraction). Todos estos modificadores funcionan en conjunto para permitir el cambio de tamaño responsivo de los elementos dentro de un FlowRow (o FlowColumn).

También puedes crear una cuadrícula alternada de diferentes tamaños de elementos, en la que dos elementos ocupen la mitad del ancho cada uno y un elemento ocupe todo el ancho de la siguiente columna:

Figura 4: FlowRow con tamaños de filas alternados

Puedes lograrlo con el siguiente código:

FlowRow(
    modifier = Modifier.padding(4.dp),
    horizontalArrangement = Arrangement.spacedBy(4.dp),
    maxItemsInEachRow = 2
) {
    val itemModifier = Modifier
        .padding(4.dp)
        .height(80.dp)
        .clip(RoundedCornerShape(8.dp))
        .background(Color.Blue)
    repeat(6) { item ->
        // if the item is the third item, don't use weight modifier, but rather fillMaxWidth
        if ((item + 1) % 3 == 0) {
            Spacer(modifier = itemModifier.fillMaxWidth())
        } else {
            Spacer(modifier = itemModifier.weight(0.5f))
        }
    }
}
FlowLayoutSnippets.kt

Tamaño fraccionario

Con Modifier.fillMaxWidth(fraction), puedes especificar el tamaño del contenedor que debe ocupar un elemento. Esto es diferente de cómo funciona Modifier.fillMaxWidth(fraction) cuando se aplica a Row o Column, ya que los elementos Row/Column ocupan un porcentaje del ancho restante, en lugar del ancho de todo el contenedor.

Por ejemplo, el siguiente código produce resultados diferentes cuando se usa FlowRow en comparación con Row:

FlowRow(
    modifier = Modifier.padding(4.dp),
    horizontalArrangement = Arrangement.spacedBy(4.dp),
    maxItemsInEachRow = 3
) {
    val itemModifier = Modifier
        .clip(RoundedCornerShape(8.dp))
    Box(
        modifier = itemModifier
            .height(200.dp)
            .width(60.dp)
            .background(Color.Red)
    )
    Box(
        modifier = itemModifier
            .height(200.dp)
            .fillMaxWidth(0.7f)
            .background(Color.Blue)
    )
    Box(
        modifier = itemModifier
            .height(200.dp)
            .weight(1f)
            .background(Color.Magenta)
    )
}
FlowLayoutSnippets.kt

FlowRow: Es el elemento del medio con una fracción de 0.7 del ancho total del contenedor.
Row: El elemento del medio ocupa el 0.7% del ancho restante de Row.

fillMaxColumnWidth() y fillMaxRowHeight()

Aplicar Modifier.fillMaxColumnWidth() o Modifier.fillMaxRowHeight() a un elemento dentro de un FlowColumn o FlowRow garantiza que los elementos de la misma columna o fila ocupen el mismo ancho o la misma altura que el elemento más grande de la columna o fila.

Por ejemplo, en este caso, se usa FlowColumn para mostrar la lista de postres de Android. Puedes ver la diferencia en el ancho de cada elemento cuando se aplica Modifier.fillMaxColumnWidth() a los elementos en comparación con cuando no se aplica y los elementos se ajustan.

FlowColumn(
    Modifier
        .padding(20.dp)
        .fillMaxHeight()
        .fillMaxWidth(),
    horizontalArrangement = Arrangement.spacedBy(8.dp),
    verticalArrangement = Arrangement.spacedBy(8.dp),
    maxItemsInEachColumn = 5,
) {
    repeat(listDesserts.size) {
        Box(
            Modifier
                .fillMaxColumnWidth()
                .border(1.dp, Color.DarkGray, RoundedCornerShape(8.dp))
                .padding(8.dp)
        ) {

            Text(
                text = listDesserts[it],
                fontSize = 18.sp,
                modifier = Modifier.padding(3.dp)
            )
        }
    }
}
FlowLayoutSnippets.kt

Se aplicó Modifier.fillMaxColumnWidth() a cada elemento
No se establecieron cambios de ancho (elementos ajustados)