UIListLayout

Mostrar obsoleto

*Este contenido se traduce usando la IA (Beta) y puede contener errores. Para ver esta página en inglés, haz clic en aquí.

Un UIListLayout posiciones de elementos de interfaz de usuario hermanos en filas o columnas dentro del contenedor de interfaz de usuario padre, basado en el FillDirection .Las propiedades y de cada hermano se ignoran o se anulan por el diseño de la lista, mientras cada hermano mantiene su definido a menos que el diseño se configure para utilizar un diseño flexible.Vea Lista y diseños flexibles para obtener más información.

UIListLayouts illustrating FillDirection of either horizontal or vertical.

Para controlar el orden de colocación de los hermanos, establece SortOrder a Enum.SortOrder.Name o Enum.SortOrder.LayoutOrder , luego renombra a los hermanos en orden alfabético o establece su valor LayoutOrder , respectivamente. UIListLayout reorganizará automáticamente los elementos cuando se agreguen/eliminen elementos o si cambian los elementos de un (elemento) del mismo nivelName o LayoutOrder .

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

La separación entre hermanos se controla a través de la propiedad Padding y se envuelve dentro de los límites del contenedor padre a través del booleano Wraps.El alineamiento de los hermanos dentro del contenedor padre se controla a través de HorizontalAlignment y VerticalAlignment a menos que el diseño se haya configurado para utilizar un diseño flexible .

Tenga en cuenta que hay implicaciones de rendimiento al usar un diseño de lista flexibilizado, ya que se necesitan cálculos adicionales para calcular los tamaños de base de flexión, los tamaños flexionados y el envoltura de línea.Flex está habilitado en un cuando se establecerlas siguientes propiedades, o si algún hermano tiene un padre a él:

Resumen

Propiedades

Propiedades heredados de UIGridStyleLayout
Ver todos los heredados de Instance
Ver todos los heredados de Object

Propiedades

HorizontalFlex

Enum.UIFlexAlignment
Leer paralelo

Cuando el diseño de la lista se establece en , la propiedad especifica cómo distribuir espacio horizontal adicional en el contenedor padre.

<th>Comportamiento de hermanos</th>

  </tr>

</thead>



<tbody>

  <tr>

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



    <td>Sin comportamiento de flex; los hermanos mantienen su ancho definido.</td>

  </tr>



  <tr>

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



    <td>Los hermanos redimensionan horizontalmente para llenar todo el contenedor padre, anulando su ancho definido.El número de hermanos en una fila se mantiene sin cambios; por ejemplo, si tres hermanos caben horizontalmente dentro de la anchura del contenedor bajo la configuración <code>Enum.UIFlexAlignment.None|None</code>, esos tres hermanos se reajustarán para llenar toda la anchura.</td>

  </tr>



  <tr>

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



    <td>Los hermanos mantienen su ancho definido. Se agrega un espacio igual en ambos lados de cada (elemento) del mismo nivel.</td>

  </tr>



  <tr>

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



    <td>Los hermanos mantienen su ancho definido.Se agrega espacio igual <b>entre</b> hermanos, pero no se agrega espacio adicional <b>alrededor de</b> hermanos</td>

  </tr>



  <tr>

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



    <td>Los hermanos mantienen su ancho definido. Se agrega un espacio igual entre <b>entre</b> y <b>alrededor de</b> hermanos.</td>

  </tr>

</tbody>
Configuración
UIListLayout examples showing how each HorizontalFlex option affects the size and spacing of sibling UI objects.
Comportamiento de dirección cruzada

En listas verticales de listas ( establecidas a ), la propiedad especifica cómo distribuir a los hermanos a través de la dirección horizontal .En tales diseños, una configuración de Enum.UIFlexAlignment.Fill llena el espacio horizontal mientras que el espacio vertical se adhiere a VerticalFlex .

Diagram showing how HorizontalFlex affects the horizontal size of sibling UI objects when the UIListLayout fill direction is set to vertical.
Interacción de tamaño automática

Si GuiObject.AutomaticSize está habilitado para un hijo del UIListLayout en el FillDirection, se interpreta como "base de flexión automática" y define el tamaño del GuiObject del cual puede crecer o disminuir.

Si GuiObject.AutomaticSize está habilitado para un hijo del UIListLayout en la dirección cruzada , se interpreta como "tamaño automático" y define el tamaño mínimo necesario para contener todo el contenido del hijo en la dirección cruzada.

ItemLineAlignment

Enum.ItemLineAlignment
Leer paralelo

En un diseño flexible , define el alineamiento transversal de los hermanos dentro de una línea. Vea Enum.ItemLineAlignment para ejemplos visuales.

<th>Comportamiento de hermanos</th>

  </tr>

</thead>



<tbody>

  <tr>

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



    <td>Alinea a los hermanos del diseño o al padre específico <code>Clase.UIFlexItem</code> al diseño de <code>Clase.UIListLayout.HorizontalAlignment|HorizontalAlignment</code> o <code>Clase.UIListLayout.VerticalAlignment|VerticalAlignment</code>, dependiendo de su <code>Clase.UIListLayout.FillDirection|FillDirection</code>.</td>

  </tr>



  <tr>

    <td><code>Enum.ItemLineAlignment.Start|Inicio</code></td>



    <td>Alinea a los hermanos del diseño o al padre específico <code>Class.UIFlexItem</code> del flujo con el <b>superior</b> de la línea en un relleno horizontal o al <b>izquierdo</b> de la línea en un relleno vertical.</td>

  </tr>



  <tr>

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



    <td>Alinea los hermanos del diseño o el padre específico Clase.UIFlexItem al centro de la línea en relleno horizontal o vertical.</td>

  </tr>



  <tr>

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



    <td>Alinea a los hermanos del diseño o al padre específico <code>Class.UIFlexItem</code> del flujo con el <b>fondo</b> de la línea en un relleno horizontal o al <b>derecho</b> de la línea en un relleno vertical.</td>

  </tr>



  <tr>

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



    <td>Estira a los hermanos del diseño o al padre específico <code>Class.UIFlexItem</code> para llenar toda la dirección cruzada de la línea en horizontal o vertical.</td>

  </tr>

</tbody>
Configuración
Examples of options for ItemLineAlignment in a horizontal fill direction.

Padding

UDim
Leer paralelo

Determina la cantidad de espacio libre entre cada elemento, establecido en una escala (porcentaje del tamaño del padre en la dirección actual) o un desplazamiento (valor de espacio estático similar al tamaño de píxel).

VerticalFlex

Enum.UIFlexAlignment
Leer paralelo

Cuando el diseño de la lista se establece en , la propiedad especifica cómo distribuir espacio vertical adicional en el contenedor padre.

<th>Comportamiento de hermanos</th>

  </tr>

</thead>



<tbody>

  <tr>

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



    <td>Sin comportamiento de flex; los hermanos mantienen su altura definida.</td>

  </tr>



  <tr>

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



    <td>Los hermanos redimensionan verticalmente para llenar todo el contenedor padre, anulando su altura definida.El número de hermanos en una columna se mantiene sin cambios; por ejemplo, si tres hermanos caben verticalmente dentro de la altura del contenedor bajo la configuración <code>Enum.UIFlexAlignment.None|None</code>, esos tres hermanos se reajustarán para llenar toda la altura.</td>

  </tr>



  <tr>

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



    <td>Los hermanos mantienen su altura definida. Se agrega un espacio igual en ambos lados de cada (elemento) del mismo nivel.</td>

  </tr>



  <tr>

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



    <td>Los hermanos mantienen su altura definida.Se agrega espacio igual <b>entre</b> hermanos, pero no se agrega espacio adicional <b>alrededor de</b> hermanos</td>

  </tr>



  <tr>

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



    <td>Los hermanos mantienen su altura definida. Se agrega un espacio igual entre <b>entre</b> y <b>alrededor de</b> hermanos.</td>

  </tr>

</tbody>
Configuración
UIListLayout examples showing how each VerticalFlex option affects the size and spacing of sibling UI objects.
Comportamiento de dirección cruzada

En listas horizontales de distribución ( establecidas a ), la propiedad especifica cómo distribuir a los hermanos a través de la dirección de cruz vertical .En tales diseños, una configuración de Enum.UIFlexAlignment.Fill llena el espacio vertical mientras que el espacio horizontal se adhiere a HorizontalFlex.

Diagram showing how VerticalFlex affects the vertical size of sibling UI objects when the UIListLayout fill direction is set to horizontal.
Interacción de tamaño automática

Si GuiObject.AutomaticSize está habilitado para un hijo del UIListLayout en el FillDirection, se interpreta como "base de flexión automática" y define el tamaño del GuiObject del cual puede crecer o disminuir.

Si GuiObject.AutomaticSize está habilitado para un hijo del UIListLayout en la dirección cruzada , se interpreta como "tamaño automático" y define el tamaño mínimo necesario para contener todo el contenido del hijo en la dirección cruzada.

Wraps

boolean
Leer paralelo

Controla si los hermanos dentro del contenedor padre se envuelven a otra línea cuando su tamaño predeterminado excede el ancho/altura de los límites del contenedor.

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

Métodos

Ver todos los heredados de Instance
Ver todos los heredados de Object

Eventos

Ver todos los heredados de Instance
Ver todos los heredados de Object