布局

如何在 Roblox 里使用 UIListLayout

UIListLayout 是 Roblox 里自动把一个 Frame 的子元素按纵向列表或横向一行排开的对象。你不用手动给每个按钮定位,只要往容器里放一个 UIListLayout,子元素就自己排好。本指南讲解那些重要的属性和一个完整示例。

打开设置模板 →

1. 把它放进容器

UIListLayout 是它所控制容器的子元素。一旦挂上去,每个同级的 Frame、按钮或标签都会被排好。

local layout = Instance.new("UIListLayout")
layout.Parent = containerFrame

2. 方向、间距和对齐

FillDirection 选纵向或横向。Padding 设子元素之间的间距。HorizontalAlignment 和 VerticalAlignment 在容器内定位整组排列。

layout.FillDirection = Enum.FillDirection.Vertical
layout.Padding = UDim.new(0, 12)
layout.HorizontalAlignment = Enum.HorizontalAlignment.Center
layout.VerticalAlignment = Enum.VerticalAlignment.Top

3. 用 SortOrder 控制顺序

默认子元素按布局顺序、再按名字排序。把 SortOrder 设为 LayoutOrder,给每个子元素一个 LayoutOrder 数字,就能控制确切顺序。

layout.SortOrder = Enum.SortOrder.LayoutOrder
firstButton.LayoutOrder = 1
secondButton.LayoutOrder = 2

提示: 把 UIListLayout 和同一容器上的 UIPadding 搭配,让整组排列离边缘留白 —— 不用给每个子元素加外边距。

常见问题

UIListLayout 也能横向排吗?

能 —— 设 FillDirection = Enum.FillDirection.Horizontal,子元素就从左到右(或按对齐方式从右到左)排开。

为什么我的子元素之间没有间距?

把布局的 Padding 设为一个 UDim 值,比如 UDim.new(0, 10)。不设的话,子元素会紧贴。