列表和柔性布局

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

Class.UIListLayout 將兄弟對象 GuiObjects 放置在水平行或垂直柱位內,以在他們的父容器中。當你添加或移除一個兄弟對物件時,Class.UIListLayout 會相應調整。

填充方向

Class.UIListLayout.FillDirection|FillDirection 屬性決定列表列表的子孫在哪個方向會成像。

UIListLayouts illustrating FillDirection of either horizontal or vertical.

排序是由レイアウト的 SortOrder 屬性決定,這可以是 上升的數字 ,基於每個道具目的 LayoutOrder 整數值,或 1> 基於道具目的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 填充標籤條平等,無論是多少個標籤。沒有方法比使用 flex 更簡單,因為它自動計算每個標籤的寬度,並且自動調整如果標籤數量

項目線對齊

Class.UIListLayout.ItemLineAlignment|ItemLineAlignment 屬性定義了子對在行中的相對位置,讓您可以對不同寬度/高度的對象進行對齊,或使用較小的寬度/高度來填滿整個行。

Examples of options for ItemLineAlignment in a horizontal fill direction.

一個實用的例子 for ItemLineAlignment 是將一系列不一致大小的瓷磚伸展到填滿整個行 ( Enum.ItemLineAlignment|Stretch),使結構更有凝聚力。

結合不同高度的瓷磚會導致不正確的平面設計和極大的間隙

柔軟個別項目

雖然擴展整個設計是一種強大的工具,但某些擴展模式更適合個別項目擴展。在這些模式中,一些元素在列表中保持其核心大小,而其他項目則擴展以填充變量空間。一個實用的用途是將列中的一個滑動欄杠條 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.