Comienza a usar FlexBox

En esta página, se describe cómo implementar diseños básicos de FlexBox.

Cómo configurar un proyecto

1. Agrega la biblioteca androidx.compose.foundation.layout al lib.versions.toml de tu proyecto.

   [versions]
   compose = "1.11.0-beta01"
   
   [libraries]
   androidx-compose-foundation-layout = { group = "androidx.compose.foundation", name = "foundation-layout", version.ref = "compose" }
   

2. Agrega la dependencia de la biblioteca al archivo build.gradle.kts de tu app.

   dependencies {
       implementation(libs.androidx.compose.foundation.layout)
   }
   

Cómo crear diseños básicos de Flexbox

Ejemplo 1: FlexBox dispone dos elementos Text que están alineados de forma central.

FlexBox(
    config = {
        direction(FlexDirection.Column)
        alignItems(FlexAlignItems.Center)
    }
) {
    Text(text = "Hello", fontSize = 48.sp)
    Text(text = "World!", fontSize = 48.sp)
}
FlexBoxSnippets.kt

Ejemplo 2: FlexBox ajusta cinco elementos en dos filas y los expande de forma desigual para llenar el espacio disponible en cada fila. Hay una brecha de 8.dp, tanto vertical como horizontalmente, entre los elementos.

FlexBox(
    config = {
        wrap(FlexWrap.Wrap)
        gap(8.dp)
    }
) {
    RedRoundedBox()
    BlueRoundedBox()
    GreenRoundedBox(modifier = Modifier.width(350.dp).flex { grow(1.0f) })
    OrangeRoundedBox(modifier = Modifier.width(200.dp).flex { grow(0.7f) })
    PinkRoundedBox(modifier = Modifier.width(200.dp).flex { grow(0.3f) })
}
FlexBoxSnippets.kt

Para obtener más información sobre el comportamiento de FlexBox, consulta Cómo establecer el comportamiento del contenedor y Cómo establecer el comportamiento del elemento.