UIListLayout

Mostrar obsoleto

*Este conteúdo é traduzido por IA (Beta) e pode conter erros. Para ver a página em inglês, clique aqui.

Um irmão de posição UIListLayout posiciona elementos de interface de usuário em linhas ou colunas dentro do contêiner de UI pai, com base no FillDirection.As propriedades e de cada irmão são ignoradas ou substituídas pelo layout da lista, enquanto cada irmão mantém sua definição a menos que o layout seja configurado para utilizar um layout flex.Veja Lista e Layouts Flex para mais informações.

UIListLayouts illustrating FillDirection of either horizontal or vertical.

Para controlar a ordem de layout dos irmãos, defina SortOrder para Enum.SortOrder.Name ou Enum.SortOrder.LayoutOrder, então renomeie os irmãos na ordem alfabética ou defina seu valor LayoutOrder, respectivamente.UIListLayout reorganizará automaticamente os elementos quando os elementos forem adicionados/removidos ou se as alterações de um elemento do mesmo nível/irmãoName ou LayoutOrder forem feitas.

List layout examples illustrating numerical LayoutOrder sorting or alphanumerical Name sorting.

O espaçamento entre irmãos é controlado através da propriedade Padding, e o envolvimento dentro dos limites do contêiner pai através do Wraps booleano.O alinhamento de irmãos dentro do contêiner pai é controlado através de HorizontalAlignment e VerticalAlignment a menos que o layout seja configurado para utilizar um layout flexível .

Observe que há implicações de desempenho ao usar um layout de lista flexível, pois são necessários cálculos extras para calcular tamanhos de base flexíveis, tamanhos flexionados e envoltura de linha.O Flex está habilitado em um quando as seguintes propriedades forem configurarou se algum irmão tiver um pai para ele:

Resumo

Propriedades

Propriedades herdados de UIGridStyleLayout
Ver todos os herdados de Instance
Ver todos os herdados de Object

Propriedades

HorizontalFlex

Enum.UIFlexAlignment
Ler Parallel

Quando o layout da lista é definido como , a propriedade especifica como distribuir espaço horizontal extra no contêiner pai.

<th>Comportamento de irmão</th>

  </tr>

</thead>



<tbody>

  <tr>

    <td><code>Enum.UIFlexAlignment.Nenhum|Não</code></td>



    <td>Sem comportamento flexível; irmãos mantêm sua largura definida.</td>

  </tr>



  <tr>

    <td><code>Enum.UIFlexAlignment.Fill|Fill</code></td>



    <td>Irmãos redimensionam horizontalmente para preencher todo o contêiner pai, substituindo sua largura definida.O número de irmãos em uma fileira permanece inalterado; por exemplo, se três irmãos se encaixarem horizontalmente dentro da largura do contêiner sob a configuração <code>Enum.UIFlexAlignment.None|None</code>, esses três irmãos serão redimensionados para preencher toda a largura.</td>

  </tr>



  <tr>

    <td><code>Enum.UIFlexAlignment.EspaçoAo redor|Espaço ao redor</code></td>



    <td>Irmãos mantêm sua largura definida. Espaçamento igual é adicionado em ambos os lados de cada elemento do mesmo nível/irmão.</td>

  </tr>



  <tr>

    <td><code>Enum.UIFlexAlignment.SpaceBetween|SpaceBetween</code></td>



    <td>Irmãos mantêm sua largura definida.Espaçamento igual é adicionado <b>entre</b> irmãos, mas nenhum espaço adicional é adicionado <b>ao redor</b> irmãos.</td>

  </tr>



  <tr>

    <td><code>Enum.UIFlexAlignment.SpaceEvenly|SpaceEvenly</code></td>



    <td>Irmãos mantêm sua largura definida. Espaçamento igual é adicionado tanto <b>entre</b> e <b>ao redor de</b> irmãos.</td>

  </tr>

</tbody>
Configuração
UIListLayout examples showing how each HorizontalFlex option affects the size and spacing of sibling UI objects.
Comportamento de sentido cruzado

Em listas verticais de layouts ( FillDirection definidas para Enum.FillDirection.Vertical ), a propriedade HorizontalFlex especifica como distribuir os irmãos através da direção horizontal cruzada .Em tais layouts, uma configuração de Enum.UIFlexAlignment.Fill faz com que os irmãos preencham todo o espaço horizontal, enquanto o espaçamento vertical adere a VerticalFlex.

Diagram showing how HorizontalFlex affects the horizontal size of sibling UI objects when the UIListLayout fill direction is set to vertical.
Interação de Tamanho Automático

Se GuiObject.AutomaticSize for habilitado para um filho do UIListLayout na FillDirection, ele é interpretado como "base flexível automática" e define o tamanho do GuiObject a partir do qual pode crescer ou encolher.

Se GuiObject.AutomaticSize for habilitado para um filho do UIListLayout na direção cruzada , ele é interpretado como "tamanho automático" e define o tamanho mínimo necessário para conter todo o conteúdo do filho na direção cruzada.

ItemLineAlignment

Enum.ItemLineAlignment
Ler Parallel

Em um layout flexível, define o alinhamento transversal de irmãos dentro de uma linha. Veja Enum.ItemLineAlignment para exemplos visuais.

<th>Comportamento de irmão</th>

  </tr>

</thead>



<tbody>

  <tr>

    <td><code>Enum.ItemLineAlignment.Automatic|Automático</code></td>



    <td>Alinha os irmãos do layout ou o pai específico <code>Class.UIFlexItem</code> para o alinhamento do layout de <code>Class.UIListLayout.HorizontalAlignment|HorizontalAlignment</code> ou <code>Class.UIListLayout.VerticalAlignment|VerticalAlignment</code>, dependendo de seu <code>Class.UIListLayout.FillDirection|FillDirection</code>.</td>

  </tr>



  <tr>

    <td><code>Enum.ItemLineAlignment.Start|Início</code></td>



    <td>Alinha os irmãos do layout ou o pai específico Classe.UIFlexItem ao topo da linha em preenchimento horizontal ou o lado esquerdo da linha em preenchimento vertical.</td>

  </tr>



  <tr>

    <td><code>Enum.ItemLineAlignment.Center|Center</code></td>



    <td>Alinha os irmãos do layout ou o pai específico Class.UIFlexItem para o centro da linha em preenchimento horizontal ou vertical.</td>

  </tr>



  <tr>

    <td><code>Enum.ItemLineAlignment.End|End</code></td>



    <td>Alinha os irmãos do layout ou o pai específico Classe.UIFlexItem ao topo da linha em um preenchimento horizontal ou o direito da linha em um preenchimento vertical.</td>

  </tr>



  <tr>

    <td><code>Enum.ItemLineAlignment.Stretch|Stretch</code></td>



    <td>Estende os irmãos do layout ou o específico <code>Class.UIFlexItem</code> pai para preencher toda a direção transversal da linha em preenchimento horizontal ou vertical.</td>

  </tr>

</tbody>
Configuração
Examples of options for ItemLineAlignment in a horizontal fill direction.

Padding

UDim
Ler Parallel

Determina a quantidade de espaço livre entre cada elemento, definida para uma escala (percentagem do tamanho do pai na direção atual) ou um deslocamento (valor de espaçamento estático semelhante ao tamanho do pixel).

VerticalFlex

Enum.UIFlexAlignment
Ler Parallel

Quando o layout da lista é definido como , a propriedade especifica como distribuir espaço vertical extra no contêiner pai.

<th>Comportamento de irmão</th>

  </tr>

</thead>



<tbody>

  <tr>

    <td><code>Enum.UIFlexAlignment.Nenhum|Não</code></td>



    <td>Sem comportamento flexível; irmãos mantêm sua altura definida.</td>

  </tr>



  <tr>

    <td><code>Enum.UIFlexAlignment.Fill|Fill</code></td>



    <td>Irmãos redimensionam verticalmente para preencher todo o contêiner pai, substituindo sua altura definida.O número de irmãos em uma coluna permanece inalterado; por exemplo, se três irmãos se encaixarem verticalmente na altura do contêiner sob a configuração <code>Enum.UIFlexAlignment.None|None</code>, esses três irmãos serão redimensionados para preencher toda a altura.</td>

  </tr>



  <tr>

    <td><code>Enum.UIFlexAlignment.EspaçoAo redor|Espaço ao redor</code></td>



    <td>Irmãos mantêm sua altura definida. Espaçamento igual é adicionado em ambos os lados de cada elemento do mesmo nível/irmão.</td>

  </tr>



  <tr>

    <td><code>Enum.UIFlexAlignment.SpaceBetween|SpaceBetween</code></td>



    <td>Irmãos mantêm sua altura definida.Espaçamento igual é adicionado <b>entre</b> irmãos, mas nenhum espaço adicional é adicionado <b>ao redor</b> irmãos.</td>

  </tr>



  <tr>

    <td><code>Enum.UIFlexAlignment.SpaceEvenly|SpaceEvenly</code></td>



    <td>Irmãos mantêm sua altura definida. Espaçamento igual é adicionado tanto <b>entre</b> e <b>ao redor</b> irmãos.</td>

  </tr>

</tbody>
Configuração
UIListLayout examples showing how each VerticalFlex option affects the size and spacing of sibling UI objects.
Comportamento de sentido cruzado

Em listas horizontais ( definidas para ), a propriedade especifica como distribuir os irmãos através da direção de cruz vertical .Em tais layouts, uma configuração de Enum.UIFlexAlignment.Fill faz com que os irmãos preencham todo o espaço vertical, enquanto o espaçamento horizontal adere a HorizontalFlex.

Diagram showing how VerticalFlex affects the vertical size of sibling UI objects when the UIListLayout fill direction is set to horizontal.
Interação de Tamanho Automático

Se GuiObject.AutomaticSize for habilitado para um filho do UIListLayout na FillDirection, ele é interpretado como "base flexível automática" e define o tamanho do GuiObject a partir do qual pode crescer ou encolher.

Se GuiObject.AutomaticSize for habilitado para um filho do UIListLayout na direção cruzada , ele é interpretado como "tamanho automático" e define o tamanho mínimo necessário para conter todo o conteúdo do filho na direção cruzada.

Wraps

boolean
Ler Parallel

Controla se os irmãos dentro do contêiner pai se encaixam em outra linha quando o tamanho padrão exceder a largura/altura dos limites do contêiner.

Diagram showing how Wraps affects how siblings are distributed within the parent container's bounds.
Ver todos os herdados de Instance
Ver todos os herdados de Object

Métodos

Ver todos os herdados de Instance
Ver todos os herdados de Object

Eventos

Ver todos os herdados de Instance
Ver todos os herdados de Object