UIListLayout

非推奨を表示

A UIListLayout positions sibling UI elements in rows or columns within the parent UI container, based on the FillDirection. The Position and Rotation properties of each sibling GuiObject are either ignored or overridden by the list layout, while each sibling retains its defined Size unless the layout is configured to utilize a flex layout. See List and Flex Layouts for further information.

UIListLayouts illustrating FillDirection of either horizontal
or vertical.

To control the layout order of siblings, set SortOrder to either Enum.SortOrder.Name or Enum.SortOrder.LayoutOrder, then rename siblings in alphanumerical order or set their LayoutOrder value, respectively. UIListLayout will automatically re‑layout elements when elements are added/removed, or if a sibling's Name or LayoutOrder changes.

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

Padding between siblings is controlled through the Padding propertly, and wrapping within the parent container's bounds through the Wraps boolean. Alignment of siblings within the parent container is controlled through HorizontalAlignment and VerticalAlignment unless the layout is configured to utilize a flex layout.

Note that there are performance implications of using a flex‑enabled list layout, since extra calculations are needed to calculate flex basis sizes, flexed sizes, and line wrapping. Flex is enabled on a UIListLayout when the following properties are set, or if any GuiObject sibling has a UIFlexItem parented to it:

概要

プロパティ

UIGridStyleLayout から継承した プロパティ

プロパティ

HorizontalFlex

並列読み取り

When the list layout's FillDirection is set to Enum.FillDirection.Horizontal, the HorizontalFlex property specifies how to distribute extra horizontal space in the parent container.

SettingSibling Behavior
NoneNo flex behavior; siblings maintain their defined width.
FillSiblings resize horizontally to fill the entire parent container, overriding their defined width. The number of siblings in a row remain unchanged; for example, if three siblings fit horizontally within the container's width under the None setting, those three siblings will resize to fill the entire width.
SpaceAroundSiblings maintain their defined width. Equal spacing is added on both sides of each sibling.
SpaceBetweenSiblings maintain their defined width. Equal spacing is added between siblings, but no additional space is added around siblings.
SpaceEvenlySiblings maintain their defined width. Equal spacing is added both between and around siblings.
UIListLayout examples showing how each HorizontalFlex option affects the size and spacing of sibling UI objects.
Cross-Direction Behavior

In vertical list layouts (FillDirection set to Enum.FillDirection.Vertical), the HorizontalFlex property specifies how to distribute the siblings across the horizontal cross‑direction. In such layouts, a setting of Enum.UIFlexAlignment.Fill makes the siblings fill the entire horizontal space while vertical spacing adheres to VerticalFlex.

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

If GuiObject.AutomaticSize is enabled for a child of the UIListLayout in the FillDirection, it is interpreted as "automatic flex basis" and it defines the size of the GuiObject from which it can grow or shrink.

If GuiObject.AutomaticSize is enabled for a child of the UIListLayout in the cross‑direction, it is interpreted as "automatic cross size" and it defines the minimum size needed to contain all the child's content in the cross‑direction.

ItemLineAlignment

並列読み取り

In a flex layout, defines the cross-directional alignment of siblings within a line. See Enum.ItemLineAlignment for visual examples.

SettingSibling Behavior
AutomaticAligns the layout's siblings or the specific UIFlexItem parent to the layout's HorizontalAlignment or VerticalAlignment, depending on its FillDirection.
StartAligns the layout's siblings or the specific UIFlexItem parent to the line's top in a horizontal fill or the line's left in a vertical fill.
CenterAligns the layout's siblings or the specific UIFlexItem parent to the line's center in either a horizontal or vertical fill.
EndAligns the layout's siblings or the specific UIFlexItem parent to the line's bottom in a horizontal fill or the line's right in a vertical fill.
StretchStretches the layout's siblings or the specific UIFlexItem parent to fill the entire cross‑direction of the line in either a horizontal or vertical fill.
Examples of options for ItemLineAlignment in a horizontal fill direction.

Padding

並列読み取り

Determines the amount of free space between each element, set to either a scale (percentage of the parent's size in the current direction) or an offset (static spacing value similar to pixel size).

並列読み取り

When the list layout's FillDirection is set to Enum.FillDirection.Vertical, the VerticalFlex property specifies how to distribute extra vertical space in the parent container.

SettingSibling Behavior
NoneNo flex behavior; siblings maintain their defined height.
FillSiblings resize vertically to fill the entire parent container, overriding their defined height. The number of siblings in a column remain unchanged; for example, if three siblings fit vertically within the container's height under the None setting, those three siblings will resize to fill the entire height.
SpaceAroundSiblings maintain their defined height. Equal spacing is added on both sides of each sibling.
SpaceBetweenSiblings maintain their defined height. Equal spacing is added between siblings, but no additional space is added around siblings.
SpaceEvenlySiblings maintain their defined height. Equal spacing is added both between and around siblings.
UIListLayout examples showing how each VerticalFlex option affects the size and spacing of sibling UI objects.
Cross-Direction Behavior

In horizontal list layouts (FillDirection set to Enum.FillDirection.Horizontal), the VerticalFlex property specifies how to distribute the siblings across the vertical cross direction. In such layouts, a setting of Enum.UIFlexAlignment.Fill makes the siblings fill the entire vertical space while horizontal spacing adheres to HorizontalFlex.

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

If GuiObject.AutomaticSize is enabled for a child of the UIListLayout in the FillDirection, it is interpreted as "automatic flex basis" and it defines the size of the GuiObject from which it can grow or shrink.

If GuiObject.AutomaticSize is enabled for a child of the UIListLayout in the cross‑direction, it is interpreted as "automatic cross size" and it defines the minimum size needed to contain all the child's content in the cross‑direction.

Wraps

並列読み取り

Controls whether siblings within the parent container wrap to another line when their default size exceeds the width/height of the container's bounds.

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

方法

イベント