列表和弹性布局

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

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

填充方向

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

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

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

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

对齐

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

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

换行

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

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

边距

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

弹性布局

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

均等填充或分配

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

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

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

项目行对齐

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

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

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

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

弹性单个项目

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

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

要将特定列表项设置为弹性,只需将 UIFlexItem 作为弹性项的子级插入,然后将其 FlexMode 属性设置为 FillGrowShrinkCustom

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