O FlexLayout é o novo layout disponível no Xamarin Forms e pode ser usado para empilhar ou envolver uma coleção de views filhas. Ele fornece diferentes maneiras de alocar componentes na tela, facilitando o alinhamento, o design e a organização do espaço.
Esse layout tem o poder de fornecer uma proporção melhor para os componentes internos, pois organiza elementos com base nas dimensões da tela e entre os elementos na tela. Mantendo assim sua view mais limpa e organizada.
Este layout é parecido com o StackLayout, pois ele pode organizar seus filhos horizontalmente e verticalmente em uma pilha. No entanto, o FlexLayout também pode envolver seus filhos se houver muitas views para caber em uma única linha ou coluna, e também tem muitas opções para a orientação e alinhamento, se adaptando a vários tamanhos de tela.
Para facilitar o entendimento, vamos iniciar apresentando alguns cenários comuns de uso do FlexLayout que descreve muitas dessas propriedades de modo mais informal.
No exemplo a seguir definiremos o código abaixo no arquivo MainPage.xaml, onde vamos organizar duas views Label, uma view Image e uma view Button.
1 – Direction: esta propriedade é definida pelos valores da enumeração FlexDirection. O valor padrão é row.
O valor definido no exemplo é Column, que faz com que as views filhas do FlexLayout sejam organizadas em uma única coluna de itens.
Quando os itens de um FlexLayout são organizados em uma coluna, o FlexLayout é considerado como tendo um eixo vertical principal e um eixo horizontal transversal. Assim, Direction indica a direção dos elementos na tela e os valores possíveis, são:
2 – AlignItens: esta propriedade é do tipo FlexAlignItens e define o comportamento do alinhamento dos elementos no contêiner, especificando como os itens são alinhados no eixo transversal.
Se tivéssemos usado um StackLayout em vez de uma FlexLayout para essa tarefa, poderíamos ter centralizado todos os itens por meio do uso da propriedade HorizontalOptions com o valor Center.
A propriedade HorizontalOptions não funciona para os filhos de um FlexLayout, mas definindo uma única propriedade AlignItems obtemos o mesmo resultado. Se precisar, você pode usar a propriedade bindable AlignSelf para substituir a propriedade AlignItems para itens individuais. Exemplo:
3 – JustifyContent: propriedade JustifyContent é do tipo FlexJustify e especifica como os itens são organizados no eixo principal.
O valor definido no exemplo foi SpaceEvenly e aloca todo o espaço vertical que sobra à esquerda igualmente entre todos os itens e acima do primeiro item e abaixo do último item.
Se tivéssemos usado um StackLayout, teríamos que atribuir a propriedade VerticalOptions de cada item para o valor CenterAndExpand para conseguir um efeito semelhante. Ocorre que a opção CenterAndExpand alocaria duas vezes mais espaço entre cada item que antes do primeiro item e depois do último item.
Para imitar a opção CenterAndExpand de VerticalOptions, podemos definir a propriedade JustifyContent com a opção SpaceAround. Os valores suportados para JustifyContent, são:
SpaceAround: começa com uma unidade de espaço para as bordas e duas unidades respectivas a outros elementos no contêiner
4 – Wrap: organiza a localização dos componentes. Por padrão, os elementos do FlexLayout são todos colocados em apenas uma linha. Com essa propriedade, podemos mudar esse comportamento.
Além de poder alterar o comportamento do Layout graças às suas propriedades principais, podemos adaptar diferentes opções usando as propriedades de cada elemento. A grande contribuição do FlexLayout é permitir que seus elementos sejam “flexíveis”, e para isso também podemos usar as propriedades FlexLayout.Grow e FlexLayout.Basis.
Essa propriedade nos permite ter ainda mais controle na organização dos itens no contêiner. O valor da propriedade pode ser de zero a qualquer valor numérico positivo.
Se todos os elementos tiverem um crescimento flexível definido como 1, o espaço restante no contêiner será distribuído igualmente para todas as views filhas. Se uma das filhas tiver um valor de 2, o espaço restante ocuparia o dobro do espaço que as outras (ou pelo menos tentaria).