列表和弹性布局

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

UIListLayout 将兄弟 GuiObjects 放置在其父容器内的水平行或垂直列中。每当您添加或移除一个兄弟对象时,布局会相应调整。

填充方向

FillDirection 属性决定列表布局的兄弟项渲染的方向。

UIListLayouts 说明 FillDirection 是水平还是垂直。

排列顺序由布局的 SortOrder 属性决定,可以是 升序数字,基于每个项目的 LayoutOrder 整数值,或 字母数字,基于项目的 Name。

列表布局示例,说明数字 LayoutOrder 排序或字母数字名称排序。

对齐

HorizontalAlignment 和 VerticalAlignment 属性决定列表兄弟项之间以及列表在其容器内的整体边界的 X 和 Y 对齐方式。例如,垂直对齐为 Center 的水平填充列表将列表的兄弟项与彼此居中对齐 并且 在其容器中垂直居中。

列表布局说明垂直对齐方式为中心。

换行

Wraps 布尔值控制当兄弟项的默认大小超过容器边界的宽度/高度时,是否在父容器内换行。

图示展示 Wraps 如何影响兄弟项在父容器边界内的分布。

边距

Padding 属性决定每个列表项之间的空白空间的数量,设置为比例(当前方向上容器大小的百分比)或偏移量(类似于像素大小的静态间距值)。

弹性布局

将 弹性 集成到 UIListLayout 是一种强大的方法,可以 均等填充/分配 或 对齐/拉伸 列表项,或在可变空间中 弹性特定项目。

均等填充或分配

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

UIListLayout 示例展示每个 HorizontalFlex 选项如何影响兄弟 UI 对象的大小和间距。

HorizontalFlex 的一个实际使用案例是 标签窗口 界面,其中弹性均等填充标签栏,无论标签数量如何。在这种情况下,没有比弹性更简单的方法,因为它会自动计算每个标签的宽度,而无需开发人员定义宽度设置,并且如果标签数量发生变化,它会自动调整。

项目行对齐

ItemLineAlignment 属性定义兄弟项在一行中的 交叉方向 对齐方式,让您可以对齐不同宽度/高度的对象或使较小宽度/高度的对象填充其整行。

水平填充方向的 ItemLineAlignment 选项示例。

ItemLineAlignment 的一个实际使用案例是拉伸一系列不规则大小的瓷砖,使其填充整个行(Stretch),使布局更加统一。

内容高度不同的瓷砖导致不均匀和错落的布局

弹性单个项目

虽然对整个布局使用弹性是一个强大的工具,但某些布局更适合于 单个项目弹性。在这样的布局中,列表中的某些元素保持其核心大小,而其他项目则弹性填充可变空间。一个实际的用例是一个滑块小部件,两端有均匀的 标签,而中间的滑块条填充整个宽度。

在 UIListLayout 控制下,特定 GuiObject 应用 UIFlexItem 的示例。

要将特定列表项设置为弹性,只需将 UIFlexItem 作为弹性项的子级插入,然后将其 FlexMode 属性设置为 Fill、Grow、Shrink 或 Custom。

在 UIListLayout 控制下,UIFlexItem 的父级示例层级。
©2026 Roblox Corporation、Roblox、Roblox 标志及 Powering Imagination 是我们在美国及其他国家或地区的注册与未注册商标。