列表和灵活布局

*此内容使用人工智能(Beta)翻译,可能包含错误。若要查看英文页面,请点按 此处

Class.UIListLayout 将兄弟对象 GuiObjects 放置在其父容器内的横向或纵向栏中。每当你添加或移除一个兄弟对象时,布局会相应调整。

填充方向

Class.UIListLayout.FillDirection|FillDirection 属性决定列表布局的兄弟姐妹在哪个方向中渲染。

UIListLayouts illustrating FillDirection of either horizontal or vertical.

排序是由布局的 SortOrder 属性确定,该属性可以是 按数字排序 ,根据每个物品目的 LayoutOrder 整数值,或 1> alphanumeric1> 基于物品目的 4> Class.Instance.Name|Name4>

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

对齐

Class.UIListLayout.HorizontalAlignment|HorizontalAlignment 和 VerticalAlignment 属性确定了各个列子弟兄在相互关

List layout illustrating VerticalAlignment of Center.

包装

Class.UIListLayout.Wraps|Wraps 控制是否在子容器包围到另一个线当其默认大小超过容器边界时,父容器包围到另一个线。

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

垫子

Class.UIListLayout.Padding|Padding 属性确定每个列物品之间的空白空间 之间的空白空间,设置为缩放(容器大小的百分比)或偏移(静电位置类似像素大小)。

灵活布局

flex 集成到 UIListLayout 是一种强大的方法来 同样填充/分配 或 1> 校准/伸展1> 列项项目或 4> flex 特定项目4> 在变量空间上。

等级填充或分配

当列表布局的 填充方向 设置为 Horizontal 时, HorizontalFlex 属性指定如何在父容器中分配额外的横向空间。同样,当填充方向设置为 <

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

一个有用的使用 HorizontalFlex 的实用例子是一个 标签窗口 界面,在 котором flex 填充 tab 栏,无论是否有 tab 条。在此情况下,没有方法比使用 更轻松的方法 更简单,因为它自动计算每个 tab 的宽度,无需设置 1> 任何宽度设置</

项目线对齐

Class.UIListLayout.ItemLineAlignment|ItemLineAlignment 属性定义了兄弟们在一条线上的 交叉 对齐,让您可以对不同宽度/高度的对象对齐对象或使小于宽度/高度的对象填充整个线。

Examples of options for ItemLineAlignment in a horizontal fill direction.

一个实用的例子 for ItemLineAlignment 是将多个不一致大小的瓷砖拉伸到填满其整行(Stretch),使布局更有致性。

不同高度的地砖会导致不平衡和悬殊的布局

灵活单件物品

虽然整个布局是一个强大的工具,但某些布局更适合 个人物品 flexing 。在这些布局中,一些元素在列表中保持其核心大小,而其他项目在灵活填充变量空间。一个实用的用例是一个滑块条 widget 的标签标签在两个端面上,并且在中间的任意宽度上。

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

要将一个特定列项设置为灵活的,请将一个 UIFlexItem 作为灵活物品的子级,然后将其 FlexMode 属性设置为 <

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