UIListLayout

Afficher les obsolètes

*Ce contenu est traduit en utilisant l'IA (Beta) et peut contenir des erreurs. Pour consulter cette page en anglais, clique ici.

A UIListLayout positions d'éléments d'interface utilisateur frères dans des colonnes ou des lignes dans le conteneur d'interface utilisateur parent, en fonction du FillDirection.Les propriétés et de chaque frère et sœur sont ignorées ou remplacées par la mise en page de la liste, tandis que chaque frère et sœur conserve sa définition à moins que la mise en page ne soit configurée pour utiliser une mise en page flexible.Voir Liste et flex layouts pour plus d'informations.

UIListLayouts illustrating FillDirection of either horizontal
or vertical.

Pour contrôler l'ordre de présentation des frères et sœurs, définissez SortOrder à Enum.SortOrder.Name ou Enum.SortOrder.LayoutOrder, puis renommez les frères et sœurs dans l'ordre alphabétique ou définissez leur valeur LayoutOrder, respectivement.UIListLayout sera automatiquement réorganiser les éléments lorsque des éléments sont ajoutés/supprimés, ou si les modifications de Name ou LayoutOrder d'un élément parentchangent.

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

L'écartement entre les frères et sœurs est contrôlé par la propriété Padding et l'emballage dans les limites du conteneur parent via la propriété Wraps booléenne.L'alignement des frères et sœurs dans le conteneur parent est contrôlé via HorizontalAlignment et VerticalAlignment à moins que le layout ne soit configuré pour utiliser un layout flex.

Notez qu'il y a des implications de performance de l'utilisation d'un layout de liste flex‑activé, car des calculs supplémentaires sont nécessaires pour calculer les tailles de base flexibles, les tailles flexibles et l'emballage des ligne.Flex est activé sur un lorsque les propriétés suivantes sont configurer, ou si un frère a un parent à lui :

et/ou ne sont pas définis sur .
n'est pas défini sur .
Wraps is true .

Résumé

Propriétés

HorizontalFlex:Enum.UIFlexAlignment
Lecture parallèle
Contrôles comment distribuer de l'espace horizontal supplémentaire.
ItemLineAlignment:Enum.ItemLineAlignment
Lecture parallèle
Dans un layout flexible, définit l'alignement transversal des frères et sœurs au sein d'une ligne.
Padding:UDim
Lecture parallèle
Quantité d'espace libre entre chaque élément.
VerticalFlex:Enum.UIFlexAlignment
Lecture parallèle
Contrôles comment distribuer de l'espace vertical supplémentaire.
Wraps:boolean
Lecture parallèle
Contrôle si les frères et sœurs dans le conteneur parent se chevauchent.

Propriétés hérités de UIGridStyleLayout

AbsoluteContentSize:Vector2
Lecture uniquement
Non répliqué
La taille absolue de l'espace occupé par le plan de grille.
FillDirection:Enum.FillDirection
Lecture parallèle
Détermine l'axe dans lequel les objets d'interface utilisateur sont disposés.
HorizontalAlignment:Enum.HorizontalAlignment
Lecture parallèle
Détermine l'alignement horizontal des éléments de l'interface utilisateur dans l'élément parent.
SortOrder:Enum.SortOrder
Lecture parallèle
Détermine l'ordre dans lequel les objets d'interface enfant sont placés dans une mise en page.
VerticalAlignment:Enum.VerticalAlignment
Lecture parallèle
Détermine l'alignement vertical des éléments de l'interface utilisateur dans l'élément parent.

Afficher tous les hérités de Instance

Afficher tous les hérités de Object

Méthodes

Afficher tous les hérités de Instance

Afficher tous les hérités de Object

Évènements

Afficher tous les hérités de Instance

Afficher tous les hérités de Object

Propriétés

HorizontalFlex

Enum.UIFlexAlignment

Lecture parallèle

Lorsque la mise en page de la liste est réglée sur , la propriété spécifie comment distribuer de l'espace horizontal supplémentaire dans le conteneur parent.


<th>Comportement frères et sœurs</th>
  </tr>
</thead>

<tbody>
  <tr>
    <td><code>Enum.UIFlexAlignment.None|Aucun</code></td>

    <td>Pas de comportement de flexion ; les frères et sœurs maintiennent leur largeur définie.</td>
  </tr>

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

    <td>Les frères et sœurs redimensionnent horizontalement pour remplir tout le conteneur parent, en remplaçant leur largeur définie.Le nombre de frères et sœurs d'une rangée reste inchangé ; par exemple, si trois frères et sœurs s'insèrent horizontalement dans la largeur du conteneur sous l'paramètre<code>Enum.UIFlexAlignment.None|None</code>, ces trois frères et sœurs s'adapteront à combler toute la largeur.</td>
  </tr>

  <tr>
    <td><code>Enum.UIFlexAlignement.SpaceAround|SpaceAround</code></td>

    <td>Les frères et sœurs maintiennent leur largeur définie. Un espacement égal est ajouté sur les deux côtés de chaque frère ou sœur.</td>
  </tr>

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

    <td>Les frères et sœurs maintiennent leur largeur définie.L'espacement équitable est ajouté <b>entre</b> les frères et sœurs, mais aucun espace supplémentaire n'est ajouté <b>autour</b> des frères et sœurs.</td>
  </tr>

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

    <td>Les frères et sœurs maintiennent leur largeur définie. Un espacement égal est ajouté à la fois <b>entre</b> et <b>autour de</b> les frères et sœurs.</td>
  </tr>
</tbody>

Paramètre

UIListLayout examples showing how each HorizontalFlex option affects the size and spacing of sibling UI objects.

Comportement de direction croisée

Dans les listes de mise en page verticales ( définies sur ), la propriété spécifie comment distribuer les frères et sœurs à travers la direction horizontale .Dans de tels布局, un paramètre de Enum.UIFlexAlignment.Fill remplit l'espace horizontal tout en respectant l'espacement vertical VerticalFlex.

Diagram showing how HorizontalFlex affects the horizontal size of sibling UI objects when the UIListLayout fill direction is set to vertical.

Interaction de taille automatique

Si GuiObject.AutomaticSize est activé pour un enfant du UIListLayout dans le FillDirection, il est interprété comme « base de flex automatique » et définit la taille du GuiObject dont il peut croître ou diminuer.

Si GuiObject.AutomaticSize est activé pour un enfant du UIListLayout dans le croisement directionnel , il est interprété comme « taille de croisement automatique » et définit la taille minimale nécessaire pour contenir tout le contenu de l'enfant dans le croisement directionnel.

ItemLineAlignment

Enum.ItemLineAlignment

Lecture parallèle

Dans un layout flexible, définit l'alignement transversal des frères et sœurs dans une ligne. Voir Enum.ItemLineAlignment pour des exemples visuels.


<th>Comportement frères et sœurs</th>
  </tr>
</thead>

<tbody>
  <tr>
    <td><code>Enum.ItemLineAlignment.Automatique|Automatique</code></td>

    <td>Aligne les frères du layout ou le parent spécifique <code>Class.UIFlexItem</code> sur le layout <code>Class.UIListLayout.HorizontalAlignment|HorizontalAlignment</code> ou <code>Class.UIListLayout.VerticalAlignment|VerticalAlignment</code>, selon sa direction de remplissage <code>Class.UIListLayout.FillDirection|FillDirection</code>.</td>
  </tr>

  <tr>
    <td><code>Enum.ItemLineAlignment.Start|Début</code></td>

    <td>Aligne les frères du layout ou le parent spécifique <code>Class.UIFlexItem</code> du ligne sur le <b>haut</b> de la ligne dans un remplissage horizontal ou le <b>gauche</b> de la ligne dans un remplissage vertical.</td>
  </tr>

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

    <td>Aligne les frères ou le parent spécifique Class.UIFlexItem du layout sur le centre de la ligne dans un remplissage horizontal ou vertical.</td>
  </tr>

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

    <td>Aligne les frères du layout ou le parent spécifique <code>Class.UIFlexItem</code> du ligne sur le <b>bas</b> de la ligne dans un remplissage horizontal ou le <b>droite</b> de la ligne dans un remplissage vertical.</td>
  </tr>

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

    <td>Étire les frères de la mise en page ou le parent spécifique <code>Class.UIFlexItem</code> pour remplir toute la direction transversale de la ligne dans un remplissage horizontal ou vertical.</td>
  </tr>
</tbody>

Paramètre

Examples of options for ItemLineAlignment in a horizontal fill direction.

Padding

UDim

Lecture parallèle

Détermine la quantité d'espace libre entre chaque élément, réglée à une échelle (percentage de la taille du parent dans la direction actuelle) ou à un décalage (value d'espacement statique similaire à la taille des pixels).

VerticalFlex

Enum.UIFlexAlignment

Lecture parallèle

Lorsque la mise en page de la liste est réglée sur , la propriété spécifie comment distribuer de l'espace vertical supplémentaire dans le conteneur parent.


<th>Comportement frères et sœurs</th>
  </tr>
</thead>

<tbody>
  <tr>
    <td><code>Enum.UIFlexAlignment.None|Aucun</code></td>

    <td>Pas de comportement de flexion ; les frères et sœurs maintiennent leur hauteur définie.</td>
  </tr>

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

    <td>Les frères et sœurs redimensionnent verticalement pour remplir tout le conteneur parent, en remplaçant leur hauteur définie.Le nombre de frères et sœurs dans une colonne reste inchangé ; par exemple, si trois frères et sœurs s'insèrent verticalement dans la hauteur du conteneur sous l'paramètre<code>Enum.UIFlexAlignment.None|None</code>, ces trois frères et sœurs s'adapteront pour remplir toute la hauteur.</td>
  </tr>

  <tr>
    <td><code>Enum.UIFlexAlignement.SpaceAround|SpaceAround</code></td>

    <td>Les frères et sœurs maintiennent leur hauteur définie. Un espacement égal est ajouté des deux côtés de chaque frère ou sœur.</td>
  </tr>

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

    <td>Les frères et sœurs maintiennent leur hauteur définie.L'espacement équitable est ajouté <b>entre</b> les frères et sœurs, mais aucun espace supplémentaire n'est ajouté <b>autour</b> des frères et sœurs.</td>
  </tr>

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

    <td>Les frères et sœurs maintiennent leur hauteur définie. L'espacement égal est ajouté à la fois <b>entre</b> et <b>autour</b> des frères et sœurs.</td>
  </tr>
</tbody>

Paramètre

UIListLayout examples showing how each VerticalFlex option affects the size and spacing of sibling UI objects.

Comportement de direction croisée

Dans les listes horizontales ( définies à ), la propriété spécifie comment distribuer les frères dans la direction verticale .Dans de tels布局, un paramètre de Enum.UIFlexAlignment.Fill remplit l'espace vertical entier alors que l'espacement horizontal adhère à HorizontalFlex.

Diagram showing how VerticalFlex affects the vertical size of sibling UI objects when the UIListLayout fill direction is set to horizontal.

Interaction de taille automatique

Wraps

boolean

Lecture parallèle

Contrôle si les frères et sœurs dans le conteneur parent s'enveloppent d'une autre ligne lorsque leur taille par défaut dépasse la largeur/hauteur des limites du conteneur.