O UIListLayout posiciona os objetos irmãos GuiObjects em linhas horizontais ou colunas verticais dentro de seu contêiner pai. Sempre que você adiciona ou remove um objeto irmão, o layout se ajusta conforme necessário.
Uma vez inserido um UIListLayout, ele substitui ou influencia a Position, Rotation, e/ou Size de todos os objetos UI irmãos, portanto, mudanças nessas propriedades na janela de Propriedades ou dentro de um script não terão o efeito normal.
Direção de preenchimento
A propriedade FillDirection determina a direção em que os irmãos do layout de lista serão renderizados.
A ordenação é determinada pela propriedade SortOrder do layout, que pode ser numérica ascendente, com base no valor inteiro LayoutOrder de cada item, ou alfanumérica com base no Name do item.
Para inverter elementos, como a ordenação da direita para a esquerda em uma lista horizontal, você precisará inverter a ordenação. Por exemplo, se quatro itens estão ordenados por LayoutOrder de 0, 1, 2, 3 respectivamente, negue cada valor para formar uma ordem de 0, -1, -2, -3.
Alinhamento
As propriedades HorizontalAlignment e VerticalAlignment determinam o respectivo alinhamento X e Y dos irmãos da lista em relação uns aos outros e aos limites gerais da lista dentro do seu contêiner. Por exemplo, uma lista preenchida horizontalmente com VerticalAlignment de Center alinha centralmente os irmãos da lista entre si e centraliza a lista verticalmente em seu contêiner.
HorizontalAlignment e VerticalAlignment diferem levemente do alinhamento de linha de item em um layout flexível, com o qual você pode alinhar itens na mesma linha sem aplicar o mesmo alinhamento aos limites gerais da lista em seu contêiner.
Quebra de linha
A propriedade Wraps controla se os irmãos dentro do contêiner pai irão quebrar para outra linha quando seu tamanho padrão exceder a largura/altura dos limites do contêiner.
Preenchimento
A propriedade Padding determina a quantidade de espaço vazio entre cada item de lista, definido como uma escala (porcentagem do tamanho do contêiner na direção atual) ou um offset (valor de espaçamento estático semelhante ao tamanho em pixels).
Essa propriedade não aplica preenchimento ao redor dos limites gerais da lista; veja UIPadding para aplicar preenchimento superior, inferior, esquerdo e/ou direito ao conteúdo do pai.
Layouts flexíveis
Integrar flex em um UIListLayout é uma maneira poderosa de preencher/distribuir igualmente ou alinhar/esticar itens da lista ao longo de sua linha, ou flexionar itens específicos em um espaço variável.
Embora flex seja uma ferramenta poderosa, você não deve aplicá-la a um UIListLayout sem propósito, pois isso adiciona um pequeno custo de desempenho em relação ao não-flex, especialmente ao redimensionar o layout ou ao adicionar/remover itens flex dinamicamente.
Além disso, um layout em grade pode ser preferível quando os itens devem se alinhar estritamente em uma grade tanto na direção X quanto Y, já que os layouts em grade impõem um tamanho de célula consistente, enquanto os layouts flexíveis podem usar um número variável de itens por linha.
Preenchimento ou distribuição igual
Quando a direção de preenchimento do layout de lista está definida como Horizontal, a propriedade HorizontalFlex especifica como distribuir o espaço horizontal extra no contêiner pai. Da mesma forma, quando a direção de preenchimento está definida como Vertical, a propriedade VerticalFlex especifica como distribuir o espaço vertical extra.
Uma aplicação prática de HorizontalFlex é uma interface de janela com abas onde o flex preenche a barra de abas igualmente, independentemente do número de abas. Nenhuma abordagem é mais fácil do que o flex nesse caso, pois ele calcula automaticamente a largura de cada aba sem configurações de largura definidas pelo desenvolvedor e se ajusta automaticamente se o número de abas mudar.
Alinhamento de linha de item
A propriedade ItemLineAlignment define o alinhamento cross‑directional dos irmãos dentro de uma linha, permitindo que você alinhe objetos de diferentes larguras/alturas ou faça objetos de largura/altura menor preencherem toda a sua linha.
Um caso de uso prático para ItemLineAlignment é esticar uma série de azulejos de tamanhos inconsistentes para preencher toda a sua linha (Stretch), tornando o layout mais coeso.
Flexionar itens individuais
Embora flexionar um layout inteiro seja uma utilidade poderosa, certos layouts são mais adequados para flexão de itens individuais. Em tais layouts, alguns elementos na lista mantêm seu tamanho principal enquanto outros itens se flexionam para preencher espaços variáveis. Um uso prático é um widget de barra deslizante com rótulos uniformes labels em ambas as extremidades e uma barra deslizante flexível que preenche toda a largura entre.
Para definir um item específico da lista como flexível, insira um UIFlexItem como um filho do item flexível, em seguida, defina sua propriedade FlexMode como Fill, Grow, Shrink, ou Custom.
