UIListLayout

显示已弃用

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

一个 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 boolean控制。父容器内兄弟的对齐由 HorizontalAlignment 和 VerticalAlignment 控制，除非布局配置使用了 灵活布局 。

请注意，使用 flex‑启用 列布局时存在性能影响，因为需要额外计算才能计算柔性基础尺寸、柔性尺寸和线包装。在以下属性设置或任何 UIListLayout 兄弟对它有父辈时，Flex 在 GuiObject 上启用，当以下属性设置或任何 UIFlexItem 兄弟对它有父辈时：

  • 和/或 未设置为 。
  • 不是 设置为 。
  • Wraps is true .

概要

属性

继承自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.SpaceEvenly|SpaceEvenly</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.
自动尺寸交互

如果 为 中的子程序启用，它将被解释为“自动伸展基础”，并定义可以从中增长或减少的 大小。

如果 为 子在交叉方向中启用，它将被解释为“自动交叉大小”，并定义了需要包含所有子内容的交叉方向的最小尺寸。

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>将布局的兄弟或特定  Class.UIFlexItem  父对齐线的顶部或线的左侧在横向填充中或线的右侧在垂直填充中。</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.SpaceEvenly|SpaceEvenly</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.
自动尺寸交互

如果 为 中的子程序启用，它将被解释为“自动伸展基础”，并定义可以从中增长或减少的 大小。

如果 为 子在交叉方向中启用，它将被解释为“自动交叉大小”，并定义了需要包含所有子内容的交叉方向的最小尺寸。

Wraps

boolean
读取并联

控制父容器内的兄弟是否在其默认尺寸超过容器边界宽度/高度时包装到另一行。

Diagram showing how Wraps affects how siblings are distributed within the parent container's bounds.
查看继承自 Instance 的全部
查看继承自 Object 的全部

方法

查看继承自 Instance 的全部
查看继承自 Object 的全部

活动

查看继承自 Instance 的全部
查看继承自 Object 的全部