Começar a usar o FlexBox

Nesta página, descrevemos como implementar layouts básicos do FlexBox.

Configurar projeto

  1. Adicione a biblioteca androidx.compose.foundation.layout ao lib.versions.toml do projeto.

    [versions]
compose = "1.11.0-alpha06"

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

  2. Adicione a dependência da biblioteca ao build.gradle.kts do app.

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

Criar layouts básicos do FlexBox

Exemplo 1: FlexBox mostra dois elementos Text alinhados centralmente.

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

Componíveis de texto "Hello World" empilhados em uma implementação básica do FlexBox.

Exemplo 2: FlexBox envolve cinco itens em duas linhas e os aumenta de forma desigual para preencher o espaço disponível em cada linha. Há uma lacuna de 8.dp na vertical e na horizontal entre os itens.

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

Duas linhas de itens coloridos, com três itens de tamanhos diferentes distribuídos na linha de cima e dois itens de tamanhos diferentes na linha de baixo.

Para saber mais sobre o comportamento de FlexBox, consulte Definir o comportamento do contêiner e Definir o comportamento do item.

Anterior
Visão geral
Avançar
Definir o comportamento do contêiner