# 布局能力

# 概述

通用情况下,能通过用户自身读取节点的localPositionworldPosition,然后写入对应节点的localPosition进行布局。

# 列表布局能力 UIGrid组件

需要布局多个渲染元素时,能使用列表布局组件UIGrid

UIGrid 会根据布局模式决定,使用固定的列表单元格大小实际子元素大小进行布局运算。

然后根据对齐方向、以及设定的行数(0为不限制自动延展)、子元素间距离等属性,进行相应的布局,动态调整对应子节点坐标,并改变自身Transform2D的大小。

# 滑动容器能力 UIScrollView组件

当列表需要渲染的元素数量过多,不能完全渲染时,能使用UIScrollView滑动控制组件,结合UIMask蒙版组件,用滑动视图显示列表。

# 根据父容器或场上节点进行布局 UIWidget组件

当布局需要根据不同的元素动态变化,你能使用UIWidget组件,根据父节点场上的任意一个或多个其他节点的信息,定位自身的位置并且允许根据目标信息,动态改变自身的尺寸。

针对需要根据屏幕尺寸的动态变化的元素,可以在代码中使用:

// uiWidgt组件左目标设置为二维世界根节点,并对齐左目标包围盒左侧。
uiWidget.leftAnchorTarget = engine.game.rootUICanvas.entity.transform2D;
uiWidget.leftAnchor = 0;
// uiWidgt组件右目标设置为二维世界根节点,并对齐右目标包围盒右侧。
uiWidget.rightAnchorTarget = engine.game.rootUICanvas.entity.transform2D;
uiWidget.rightAnchor = 1;
// uiWidgt组件上目标设置为二维世界根节点,并对齐上目标包围盒上侧。
uiWidget.topAnchorTarget = engine.game.rootUICanvas.entity.transform2D;
uiWidget.topAnchor = 1;
// uiWidgt组件下目标设置为二维世界根节点,并对齐下目标包围盒下侧。
uiWidget.bottomAnchorTarget = engine.game.rootUICanvas.entity.transform2D;
uiWidget.bottomAnchor = 0;

// 此时,uiWidget元素撑满整个二维空间