Listes et dispositions flexibles

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

Les positions UIListLayout des frères et sœurs GuiObjects dans des colonnes horizontales ou des colonnes verticales dans leur conteneur parent.Chaque fois que vous ajoutez ou supprimez un objet frère, le layout s'ajuste en conséquence.

Remplir la direction

La propriété FillDirection détermine la direction dans laquelle les frères de la mise en page de la liste s'afficheront.

UIListLayouts illustrating FillDirection of either horizontal or vertical.

L'ordre est déterminé par la propriété de la mise en page SortOrder qui peut être soit ascendante numérique , basée sur la valeur entière de l'itemLayoutOrder , ou alphanumérique , basée sur la valeur entière de l'itemName.

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

Alignement

Les propriétés HorizontalAlignment et VerticalAlignment déterminent respectivement l'alignement X et Y des frères de la liste par rapport les uns aux autres et les limites globales de la liste dans son conteneur.Par exemple, une liste remplie horizontalement avec VerticalAlignment de Center centralise les frères de la liste les uns avec les autres et centre la liste verticalement dans son conteneur.

List layout illustrating VerticalAlignment of Center.

Emballage

Les contrôles booléens Wraps déterminent 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.

Diagram showing how Wraps affects how siblings are distributed within the parent container's bounds.

Espacement

La propriété Padding détermine la quantité d'espace vide entre chaque itemde liste, réglée à une échelle (percentage de la taille du conteneur dans la direction actuelle) ou à un décalage (value d'espacement statique similaire à la taille des pixels).

Dispositions flexibles

Intégrer flex dans un UIListLayout est un moyen puissant de remplir/distribuer équitablement ou aligner/étirer les éléments de la liste sur leur ligne, ou d'intégrer des éléments flex spécifiques sur un espace variable.

Remplissage ou distribution égale

Lorsque la direction de remplissage de la liste est définie sur , la propriété spécifie comment distribuer de l'espace horizontal supplémentaire dans le conteneur parent.De même, lorsque la direction de remplissage est définie à Vertical , la propriété VerticalFlex spécifie comment distribuer de l'espace vertical supplémentaire.

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

Une utilisation pratique de HorizontalFlex est une interface à onglets où flex remplit la barre d'onglets de manière égale, indépendamment du nombre d'onglets.Aucune approche n'est plus simple que flex dans ce cas, car il calcule automatiquement la largeur de chaque onglet sans paramètres de largeur définis par le développeur, et s'ajuste automatiquement si le nombre d'onglets change.

Alignement de la ligne d'objet

La propriété ItemLineAlignment définit l'alignement transversal des frères dans une ligne, vous permettant d'aligner des objets de différentes largeurs/hauteurs ou de remplir toute leur ligne avec des objets de moins largeur/hauteur.

Examples of options for ItemLineAlignment in a horizontal fill direction.

Un cas d'utilisation pratique pour ItemLineAlignment est d'étirer une série de tuiles de taille inégale pour remplir toute leur rangée ( Stretch ), ce qui rend le layout plus cohérent.

Les tuiles avec des hauteurs de contenu variables donnent lieu à un layout inégal et échelonné

Flexifier des articles individuels

Bien que flexionner tout un layout soit une puissante utilité, certains layouts sont plus adaptés à la flexion de chaque élément individuel .Dans de tels布局, certains éléments de la liste maintiennent leur taille principale alors que d'autres éléments s'adaptent pour remplir des espaces variables.Un usage pratique est un widget de barre de défilement avec des étiquettes uniformes sur les deux extrémités et une barre de défilement flexible qui remplit toute la largeur entre les deux extrémités.

Example of UIFlexItem applied to a specific GuiObject under control of a UIListLayout.

Pour définir un élément de liste spécifique comme flexible, insérez un UIFlexItem comme enfant de l'itemflexible, puis définissez sa propriété FlexMode à Fill, Grow, Shrink ou Custom.

Example hierarchy of a UIFlexItem parented to a GuiObject under control of a UIListLayout.