Layout 组件参考

Layout 是一种容器组件，容器能够开启自动布局功能，自动按照规范排列所有子物体，方便用户制作列表、翻页等功能。

layout

点击 属性检查器 下面的 添加组件 按钮，然后选择 UI -> Layout 即可添加 Layout 组件到节点上。

布局的组件接口请参考 Layout API。

具体使用方法可参考范例 Layout（GitHub | Gitee）。

Layout 属性

属性功能说明
Type布局类型，支持 NONE、HORIZONTAL、VERTICAL 和 GRID。
ResizeMode缩放模式，支持 NONE、CHILDREN 和 CONTAINER。
PaddingLeft排版时，子物体相对于容器左边框的距离。
PaddingRight排版时，子物体相对于容器右边框的距离。
PaddingTop排版时，子物体相对于容器上边框的距离。
PaddingBottom排版时，子物体相对于容器下边框的距离。
SpacingX水平排版时，子物体与子物体在水平方向上的间距。NONE 模式无此属性。
SpacingY垂直排版时，子物体与子物体在垂直方向上的间距。NONE 模式无此属性。
HorizontalDirection指定水平排版时，第一个子节点从容器的左边还是右边开始布局。当容器为 GRID 类型时，此属性和 Start Axis 属性一起决定 Grid 布局元素的起始水平排列方向。
VerticalDirection指定垂直排版时，第一个子节点从容器的上面还是下面开始布局。当容器为 GRID 类型时，此属性和 Start Axis 属性一起决定 Grid 布局元素的起始垂直排列方向。
CellSize此属性只在 GRID 布局、Children 缩放模式时存在，指定网格容器里面排版元素的大小。
StartAxis此属性只在 GRID 布局时存在，指定网格容器里面元素排版指定的起始方向轴。
AffectedByScale子节点的缩放是否影响布局。
AutoAlignment自动对齐，在 Type 类型为 HORIZONTAL 或 VERTICAL 模式下，保证另外一个轴向值始终为 0。
Constraint布局约束，可以在某个方向上约束排列数量，支持 NONE、FIXED_ROW 和 FIXED_COL。
ConstraintNum布局约束值，在 Constraint 的类型为 FIXED_ROW 或 FIXED_COL 模式下有效。

详细说明

添加 Layout 组件之后，默认的布局类型是 NONE，可以通过修改 属性检查器 里的 Type 切换容器排列类型。类型分为 HORIZONTAL（水平）、VERTICAL（垂直）以及 GRID（网格）布局。另外，除了 NONE 布局类型，其他都支持 ResizeMode。

  • ResizeMode 模式：

    • 设置为 NONE 时，子物体和容器的大小变化互不影响。

    • 设置为 CHILDREN 时，子物体大小会随着容器的大小而变化。

    • 设置为 CONTAINER 时，容器的大小会随着子物体的大小变化。

      所有的排列都是根据容器大小进行计算的，如果需要固定排序，可以将 Type 设置为 GRID，然后设置 Constraint 和 ConstraintNum 来固定排序。

  • Constraint 模式：

    • 设置为 NONE 时，自由布局。

    • 设置为 FIXED_ROW 时，固定行数，搭配 ConstraintNum 使用。

    • 设置为 FIXED_COL 时，固定列数，搭配 ConstraintNum 使用。

注意：Layout 设置后的结果需要到下一帧才会更新，除非你设置完以后手动调用 updateLayout API。

更多布局案例，详情请参考 自动布局。