CocosCreator3.8研究笔记（十八）CocosCreator UI组件（二）

前面的文章已经介绍了Canvas 组件、UITransform 组件、Widget 组件 。

想了解的朋友，请查看 CocosCreator3.8研究笔记（十七）CocosCreator UI组件（一）。

今天我们主要介绍CocosCreator 常用容器组件：Layout 组件 、ScrollView 组件 、PageView 组件。

一、Layout 组件


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

（1）、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 模式下有效。</