UIListLayout

顯示已棄用項目

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

A UIListLayout 位置姐妹 UI 元素在父 UI 容器內的行或列中，根據 FillDirection 。每個兄弟姐妹的 和 屬性可以被忽略或被列表布局覆蓋，而每個兄弟姐妹保留其定義的 ，除非布局配置使用柔性布局。請參閱列表和柔性布局以獲得更多信息。

UIListLayouts illustrating FillDirection of either horizontal or vertical.

要控制兄弟的布局順序，將 SortOrder 設為 Enum.SortOrder.Name 或 Enum.SortOrder.LayoutOrder ，然後重命名兄弟按字母順序或設置他們的 LayoutOrder 值，分別如此。UIListLayout 將在元素被添加/移除或兄同級（物件）的Name或LayoutOrder變更時自動重新佈置元素。

List layout examples illustrating numerical LayoutOrder sorting or alphanumerical Name sorting.

兄弟姐妹之間的填充由 Padding 屬性控制，將它們包裝在父容器的範圍內通過 Wraps 是否。在父容器內的兄弟姐妹的對齊由 HorizontalAlignment 和 VerticalAlignment 控制，除非布局配置使用 靈活布局 。

請注意，使用 柔性啟用 列布局時，額外計算需要計算柔性基礎尺寸、柔性尺寸和線包裝。當以下屬性設設定或任何 UIListLayout 兄弟對它有父輩時,Flex在GuiObject上啟用,當以下屬性設置或任何UIFlexItem 兄弟對它有父輩時:

概要

屬性

屬性 繼承自 UIGridStyleLayout
檢視繼承自Instance的所有項目
檢視繼承自Object的所有項目

屬性

HorizontalFlex

Enum.UIFlexAlignment
平行讀取

當列布局的 FillDirection 設為 Enum.FillDirection.Horizontal 時，HorizontalFlex 屬性指定如何在父容器中分配額外的水平空間。

<th>兄弟行為</th>

  </tr>

</thead>



<tbody>

  <tr>

    <td><code>Enum.UIFlexAlignment.None|None</code></td>



    <td>沒有彈性行為；兄弟姐妹保持定義的寬度。</td>

  </tr>



  <tr>

    <td><code>Enum.UIFlexAlignment.Fill|填滿</code></td>



    <td>兄弟姐妹會縱向縮放以填滿整個父容器，覆蓋其定義的寬度。行中的兄弟姐妹數量保持不變；例如，如果三個兄弟在容器的寬度下的 <code>Enum.UIFlexAlignment.None|None</code> 設置中水平配設定，那些三個兄弟將縮放以填滿整個寬度。</td>

  </tr>



  <tr>

    <td><code>Enum.UIFlexAlignment.SpaceAround|SpaceAround</code></td>



    <td>兄弟姐妹保留其定義的寬度。每個兄弟姐妹的兩側都添加了相同的間距。</td>

  </tr>



  <tr>

    <td><code>Enum.UIFlexAlignment.SpaceBetween|SpaceBetween</code></td>



    <td>兄弟姐妹保持其定義的寬度。等距離被添加到兄弟姐妹之間的距離，但沒有額外的空間被添加到兄弟姐妹周圍。</td>

  </tr>



  <tr>

    <td><code>Enum.UIFlexAlignment.Space平等|Space平等</code></td>



    <td>兄弟姐妹維持其定義的寬度。平等距離被添加到兄弟姐妹之間的  和  以及兄弟姐妹周圍的  之間。</td>

  </tr>

</tbody>
設置
UIListLayout examples showing how each HorizontalFlex option affects the size and spacing of sibling UI objects.
交叉方向行為

在 垂直 列布局 ( FillDirection 設為 Enum.FillDirection.Vertical ) 中, HorizontalFlex 屬性指定如何在 水平橫向方向 分配兄弟。在這些佈局中，Enum.UIFlexAlignment.Fill設置使兄弟姐妹填滿整個垂直空間，而垂直間距遵守VerticalFlex。

Diagram showing how HorizontalFlex affects the horizontal size of sibling UI objects when the UIListLayout fill direction is set to vertical.
自動尺寸互動

如果 GuiObject.AutomaticSize 在 UIListLayout 中啟用了孩子的 FillDirection，它將被解釋為"自動伸展基礎"，並定義了從中可以增長或縮小的 GuiObject 大小。

如果 GuiObject.AutomaticSize 在 UIListLayout 中啟用了孩子的 **** ，它將被解釋為"自動交叉尺寸"，並定義了需要在交叉方向中包含所有子內容的最小尺寸。

ItemLineAlignment

Enum.ItemLineAlignment
平行讀取

在 柔性布局 中，定義線內兄弟的 交叉方向 對齊。請參見 Enum.ItemLineAlignment 視覺示例。

<th>兄弟行為</th>

  </tr>

</thead>



<tbody>

  <tr>

    <td><code>Enum.ItemLineAlignment.自動|自動</code></td>



    <td>將布局的兄弟或特定 <code>Class.UIFlexItem</code> 父對布局的 <code>Class.UIListLayout.HorizontalAlignment|HorizontalAlignment</code> 或 <code>Class.UIListLayout.VerticalAlignment|VerticalAlignment</code> 進行匹配，取決於其 <code>Class.UIListLayout.FillDirection|FillDirection</code> 。</td>

  </tr>



  <tr>

    <td><code>Enum.ItemLineAlignment.Start|開始</code></td>



    <td>將布局的兄弟或特定 <code>Class.UIFlexItem</code> 父親對線的 <b>頂部</b> 進行水平填充或線的 <b>左</b> 進行垂直填充。</td>

  </tr>



  <tr>

    <td><code>Enum.ItemLineAlignment.Center|中心</code></td>



    <td>將布局的兄弟或特定 <code>Class.UIFlexItem</code> 父親對線的 <b>中心</b> 在水平或垂直填充中進行對齊。</td>

  </tr>



  <tr>

    <td><code>Enum.ItemLineAlignment.End|結束</code></td>



    <td>將布局的兄弟或特定 <code>Class.UIFlexItem</code> 父親對線的 <b>底部</b> 在水平填充或線的 <b>右侧</b> 在垂直填充中進行對齐。</td>

  </tr>



  <tr>

    <td><code>Enum.ItemLineAlignment.Stretch|Stretch</code></td>



    <td>延伸布局的兄弟或特定 <code>Class.UIFlexItem</code> 父親以填滿線的整個垂直或水平方向。</td>

  </tr>

</tbody>
設置
Examples of options for ItemLineAlignment in a horizontal fill direction.

Padding

UDim
平行讀取

決定每個元素之間的空白量，設為比例（當前方向中父元素的尺寸百分比）或偏移（與像素尺寸相似的靜態間隙值）。

VerticalFlex

Enum.UIFlexAlignment
平行讀取

當列布局的 FillDirection 設為 Enum.FillDirection.Vertical 時，VerticalFlex 屬性指定如何在父容器中分配額外的垂直空間。

<th>兄弟行為</th>

  </tr>

</thead>



<tbody>

  <tr>

    <td><code>Enum.UIFlexAlignment.None|None</code></td>



    <td>沒有彈性行為；兄弟姐妹保持其定義的高度。</td>

  </tr>



  <tr>

    <td><code>Enum.UIFlexAlignment.Fill|填滿</code></td>



    <td>兄弟姐妹垂直縮放以填滿整個父容器，覆蓋其定義的高度。列中的兄弟數量保持不變；例如，如果三個兄弟在容器的高度下垂直於 <code>Enum.UIFlexAlignment.None|None</code> 設定置中匹配，那些三個兄弟將縮放以填滿整個高度。</td>

  </tr>



  <tr>

    <td><code>Enum.UIFlexAlignment.SpaceAround|SpaceAround</code></td>



    <td>兄弟姐妹維持其定義的高度。每個兄弟姐妹的兩側都添加了相同的間距。</td>

  </tr>



  <tr>

    <td><code>Enum.UIFlexAlignment.SpaceBetween|SpaceBetween</code></td>



    <td>兄弟姐妹保持其定義的高度。等距離被添加到兄弟姐妹之間的距離，但沒有額外的空間被添加到兄弟姐妹周圍。</td>

  </tr>



  <tr>

    <td><code>Enum.UIFlexAlignment.Space平等|Space平等</code></td>



    <td>兄弟姐妹維持其定義的高度。平等距離被添加到兄弟姐妹之間的  和  以及兄弟姐妹周圍的  之間。</td>

  </tr>

</tbody>
設置
UIListLayout examples showing how each VerticalFlex option affects the size and spacing of sibling UI objects.
交叉方向行為

在 水平列布局 ( ) 中, 屬性指定如何在 垂直交叉方向 分配兄弟。在這些佈局中，Enum.UIFlexAlignment.Fill設置使兄弟姐妹填滿整個垂直空間，而水平空間距離遵守HorizontalFlex。

Diagram showing how VerticalFlex affects the vertical size of sibling UI objects when the UIListLayout fill direction is set to horizontal.
自動尺寸互動

如果 GuiObject.AutomaticSize 在 UIListLayout 中啟用了孩子的 FillDirection，它將被解釋為"自動伸展基礎"，並定義了從中可以增長或縮小的 GuiObject 大小。

如果 GuiObject.AutomaticSize 在 UIListLayout 中啟用了孩子的 **** ，它將被解釋為"自動交叉尺寸"，並定義了需要在交叉方向中包含所有子內容的最小尺寸。

Wraps

boolean
平行讀取

控制父容器內的子元素是否在其預設尺寸超出容器邊界時轉到另一行。

Diagram showing how Wraps affects how siblings are distributed within the parent container's bounds.
檢視繼承自Instance的所有項目
檢視繼承自Object的所有項目

方法

檢視繼承自Instance的所有項目
檢視繼承自Object的所有項目

活動

檢視繼承自Instance的所有項目
檢視繼承自Object的所有項目