# 布局能力
# 概述
通用情况下,能通过用户自身读取节点的localPosition
或worldPosition
,然后写入对应节点的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元素撑满整个二维空间