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 funções 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. Pense nisso como o tamanho preferencial 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 que pode ser composto Text é a largura de todo o texto em uma única linha, sem quebra.	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 exige 50dp para ser exibido, mas também tem basis = 10.dp, um valor de 50dp é usado.

Aumentar itens quando houver espaço

Use grow para especificar o quanto um item cresce quando há espaço extra. Esse é o espaço restante no contêiner FlexBox depois que todos os valores basis dos itens foram adicionados. 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 aumentam.

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, o filho 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. O filho 1 cresce em 300dp para preencher o espaço extra.

No exemplo a seguir, o tamanho do contêiner e o tamanho de basis são os mesmos. 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. O filho 1 cresce em (1 / 6) * 300 = 50dp O filho 2 cresce em (2 / 6) * 300 = 100dp O filho 3 cresce em (3 / 6) * 300 = 150dp

Encolher 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. shrink funciona da mesma forma que grow, mas, em vez de distribuir espaço extra aos itens, o déficit de espaço é distribuído aos itens. 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 encolhem igualmente.

O exemplo a seguir mostra dois elementos que podem ser compostos 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 transversal. Isso substitui a propriedade alignItems do contêiner para esse item. Ele tem todos os mesmos valores possíveis, com a adição de Auto, que herda o comportamento do contêiner FlexBox.

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

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 organiza 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. Todos os itens que têm o mesmo valor order são dispostos na mesma ordem em que são declarados. Use valores negativos e positivos de order para mover itens para o início ou o fim de um layout sem mudar onde 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. Após a classificação, o filho 1 aparece depois do filho 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