Definir o comportamento do item

Use Modifier.flex para controlar como um item muda de tamanho, ordem e é alinhado dentro de um FlexBox.

Tamanho do item

Use as propriedades basis, grow e shrink para controlar o tamanho de um item.

FlexBox {
    RedRoundedBox(
        modifier = Modifier.flex {
            basis = FlexBasis.Auto
            grow = 1.0f
            shrink = 0.5f
        }
    )
}
FlexBoxSnippets.kt

Definir tamanho inicial

Use basis para especificar o tamanho inicial do item antes que qualquer espaço extra seja distribuído. Você pode pensar nisso como o tamanho preferido do item.

Tipo de valor	Comportamento	Snippet de código Observação: as caixas têm um tamanho intrínseco máximo de 100dp.	Exemplo usando a largura do contêiner 600dp
Auto (padrão)	Use o tamanho intrínseco máximo do item. Por exemplo, a largura intrínseca máxima de um elemento combinável Text é a largura de todo o texto em uma única linha, sem quebra de texto.	FlexBox { RedRoundedBox( Modifier.flex { basis = FlexBasis.Auto } ) BlueRoundedBox( Modifier.flex { basis = FlexBasis.Auto } ) } FlexBoxSnippets.kt
Correção de dp.	Um tamanho fixo em dp.	FlexBox { RedRoundedBox( Modifier.flex { basis(200.dp) } ) BlueRoundedBox( Modifier.flex { basis(100.dp) } ) } FlexBoxSnippets.kt
Porcentagem	Uma porcentagem do tamanho do contêiner.	FlexBox { RedRoundedBox( Modifier.flex { basis(0.7f) } ) BlueRoundedBox( Modifier.flex { basis(0.3f) } ) } FlexBoxSnippets.kt

Se o valor de base for menor que o tamanho mínimo intrínseco do item, o tamanho mínimo intrínseco será usado. Por exemplo, se um item Text que contém uma palavra exigir 50dp para exibição, mas também tiver basis = 10.dp, um valor de 50dp será usado.

Aumentar itens quando houver espaço

Use grow para especificar o quanto um item aumenta quando há espaço extra. Esse é o espaço restante no contêiner FlexBox depois que todos os valores basis dos itens são somados. O valor grow indica quanto do espaço extra um determinado filho vai receber em relação aos irmãos. Por padrão, os itens não vão aumentar.

O exemplo a seguir mostra um FlexBox com três itens filhos. Cada um tem um valor de base de 100dp. O primeiro filho tem um valor grow positivo. Como há apenas um filho com um valor grow, o valor real é irrelevante. Desde que seja positivo, a criança recebe todo o espaço extra.

As imagens mostram o comportamento do FlexBox quando o tamanho do contêiner é 600dp.

FlexBox { RedRoundedBox( title = "400dp", modifier = Modifier.flex { grow = 1f } ) BlueRoundedBox(title = "100dp") GreenRoundedBox(title = "100dp") } FlexBoxSnippets.kt

Cada filho tem um valor de base de 100dp. Há 300dp de espaço extra. A criança 1 cresce 300dp para preencher o espaço extra.

No exemplo a seguir, o tamanho do contêiner e o tamanho de basis são iguais. A diferença é que cada filho tem um valor grow diferente.

FlexBox { RedRoundedBox( title = "150dp", modifier = Modifier.flex { grow = 1f } ) BlueRoundedBox( title = "200dp", modifier = Modifier.flex { grow = 2f } ) GreenRoundedBox( title = "250dp", modifier = Modifier.flex { grow = 3f } ) } FlexBoxSnippets.kt

Cada filho tem um valor de base de 100dp. Há 300dp de espaço extra. O valor total de crescimento é 6. A criança 1 cresce (1 / 6) * 300 = 50dp A criança 2 cresce em (2 / 6) * 300 = 100dp A criança 3 cresce (3 / 6) * 300 = 150dp

Reduzir itens quando não houver espaço suficiente

Use shrink para especificar o quanto um item diminui quando o contêiner FlexBox não tem espaço suficiente para todos os itens. O shrink funciona da mesma forma que o grow, mas, em vez de distribuir espaço extra aos itens, o déficit de espaço é distribuído. O valor shrink especifica quanto do déficit de espaço o item recebe ou, melhor dizendo, quanto o item vai diminuir. Por padrão, os itens têm um valor shrink de 1f, o que significa que eles diminuem igualmente.

O exemplo a seguir mostra dois elementos combináveis Text com o mesmo texto. O primeiro filho tem um valor de redução de 1f, o que significa que ele é reduzido para absorver todo o déficit de espaço.

FlexBox {
    Text(
        "The quick brown fox",
        fontSize = 36.sp,
        modifier = Modifier
            .background(PastelRed)
            .flex { shrink = 1f }
    )
    Text(
        "The quick brown fox",
        fontSize = 36.sp,
        modifier = Modifier
            .background(PastelBlue)
            .flex { shrink = 0f }
    )
}
FlexBoxSnippets.kt

À medida que o tamanho do contêiner diminui, o filho 1 também diminui.

Tamanho do contêiner	Interface do FlexBox
700dp
500dp
450dp

Alinhamento de itens

Use alignSelf para controlar como um item é alinhado ao eixo cruzado. Isso substitui a propriedade alignItems do contêiner para esse item. Ele tem todos os mesmos valores possíveis, além de Auto, que herda o comportamento do contêiner FlexBox.

Por exemplo, este FlexBox tem alignItems definido como Start e cinco filhos que substituem o alinhamento do eixo cruzado.

FlexBox(
    config = {
        alignItems = FlexAlignItems.Start
    }
) {
    RedRoundedBox()
    BlueRoundedBox(modifier = Modifier.flex { alignSelf = FlexAlignSelf.Center })
    GreenRoundedBox(modifier = Modifier.flex { alignSelf = FlexAlignSelf.End })
    PinkRoundedBox(modifier = Modifier.flex { alignSelf = FlexAlignSelf.Stretch })
    OrangeRoundedBox(modifier = Modifier.flex { alignSelf = FlexAlignSelf.Baseline })
}
FlexBoxSnippets.kt

Ordem dos itens

Por padrão, o FlexBox dispõe os itens na ordem em que são declarados no código. Substitua esse comportamento usando order.

O valor padrão de order é zero, e FlexBox classifica os itens com base nesse valor em ordem crescente. Os itens com o mesmo valor de order são dispostos na mesma ordem em que foram declarados. Use valores order negativos e positivos para mover itens para o início ou o fim de um layout sem mudar o local em que eles são declarados.

O exemplo a seguir mostra dois itens filhos. O primeiro tem o order padrão de zero, e o segundo tem uma ordem de -1. Depois da classificação, a criança 1 aparece depois da criança 2.

FlexBox {
    // Declared first, but will be placed after visually
    RedRoundedBox(
        title = "World"
    )

    // Declared second, but will be placed first visually
    BlueRoundedBox(
        title = "Hello",
        modifier = Modifier.flex {
            order = -1
        }
    )
}
FlexBoxSnippets.kt