列表和彈性佈局

*此內容是使用 AI(Beta 測試版)翻譯,可能含有錯誤。若要以英文檢視此頁面,請按一下這裡

UIListLayout 將兄弟 GuiObjects 安置於其父容器中的水平行或垂直列中。每當你添加或移除一個兄弟物件時,佈局會相應調整。

填充方向

FillDirection 屬性決定列表佈局的兄弟將以何種方向呈現。

UIListLayouts 說明 FillDirection 為水平或垂直的示例。

順序是由佈局的 SortOrder 屬性決定的,可以是 升序數字,基於每個項目的 LayoutOrder 整數值,或是 字母數字,根據項目的 Name

列表佈局示例說明數值 LayoutOrder 排序或字母數字 Name 排序。

對齊

HorizontalAlignmentVerticalAlignment 屬性決定列表兄弟之間的相對 XY 對齊方式,以及列表在其容器內的整體邊界。例如,具有 VerticalAlignmentCenter 的水平填充列表將使列表的兄弟相互居中 使列表在其容器中垂直居中。

列表佈局說明 VerticalAlignment 為 Center 的示例。

捲動

Wraps 布林值控制當兄弟物件的默認大小超過容器邊界的寬度/高度時,是否在父容器內捲動到另一路徑。

圖示說明 Wraps 如何影響兄弟在父容器邊界內的分布。

邊距

Padding 屬性決定每個列表項目之間的空白空間量,可以設置為比例(當前方向上容器大小的百分比)或偏移(靜態間距值類似於像素大小)。

彈性佈局

彈性 整合到 UIListLayout 中是一種強大的方法,可以 均勻填充/分配對齊/拉伸 列表項目,或在變數空間內 彈性調整特定項目

均勻填充或分配

當列表佈局的 填充方向 設置為 Horizontal 時,HorizontalFlex 屬性指定如何在父容器中分配額外的水平空間。類似地,當填充方向設置為 Vertical 時,VerticalFlex 屬性指定如何在父容器中分配額外的垂直空間。

UIListLayout 示例顯示每個 HorizontalFlex 選項如何影響兄弟 UI 物件的大小和間距。

HorizontalFlex 的一個實際用途是 選項卡窗口 界面,其中彈性均勻填充選項卡條,無論選項卡的數量如何。在這種情況下,沒有比彈性更簡單的方法,因為它自動計算每個選項卡的寬度,而無需開發者定義的寬度設置,並且在選項卡數量改變時自動調整。

項目行對齊

ItemLineAlignment 屬性定義同一行內兄弟的 交叉方向 對齊,讓你可以對齊不同寬度/高度的物件或使較小寬度/高度的物件填滿整個行。

項目行對齊的選項在水平填充方向的示例。

ItemLineAlignment 的一個實際用例是將一系列不規則大小的瓷磚拉伸以填滿它們的整個行(Stretch),使佈局看起來更具整體性。

內容高度不一的瓷磚造成不均勻和交錯的佈局

彈性個別項目

雖然對整個佈局進行彈性調整是一個強大的工具,但某些佈局更適合 個別項目彈性調整。在這類佈局中,列表中的某些元素保持其核心大小,而其他項目則彈性填充可變空間。一個實際的用法是具有兩端均勻 標籤 的滑動條小工具,以及填充整個寬度的彈性滑動條。

UIFlexItem 應用於由 UIListLayout 控制的特定 GuiObject 的示例。

要將一個特定的列表項設置為彈性項,請將 UIFlexItem 插入到彈性項的子項中,然後將其 FlexMode 屬性設置為 FillGrowShrinkCustom

UIFlexItem 的層級示例,父項為在 UIListLayout 下控制的 GuiObject。
©2026 Roblox Corporation、Roblox、Roblox 標誌及 Powering Imagination 是我們在美國及其他國家地區的部分註冊與未註冊商標。