Widget 组件参考

    点击 属性检查器 下面的 添加组件 按钮,然后选择 UI/Widget 即可添加 Widget 组件到节点上。

    对齐挂件的脚本接口请参考 Widget API

    关于使用可以参考范例 Widget( | Gitee)。

    我们可以在 Canvas 下新建一个 sprite,在 sprite 节点上添加一个 Widget 组件,然后做如下一些测试:

    下对齐,下边界距离 50%

    百分比将以父节点的宽或高作为基准。

    bottom-0.5

    右下对齐,边界距离 0 px

    bottom-right-0px

    竖直方向居中,并且右边界距离 50%

    宽度拉伸,左右边距 10%

    h-stretch

    水平和竖直同时拉伸,边距 50 px

    margin-50px

    如果 Align Mode 属性设为 ALWAYS 时,会在运行时每帧都按照设置的对齐策略进行对齐,组件所在节点的位置(position)和尺寸(width,height)属性可能会被限制,不能通过 API 或动画系统自由修改。这是因为通过 Widget 对齐是在每帧的最后阶段进行处理的,因此对 Widget 组件中已经设置了对齐的相关属性进行设置,最后都会被 Widget 组件本身的更新所重置。

    如果需要同时满足对齐策略和可以在运行时改变位置和尺寸的需要,可以通过以下两种方式实现:

    1. 通过调用 Widget 组件的对齐边距 API,包括 topbottomleftright,直接修改 Widget 所在节点的位置或某一轴向的拉伸。这些属性也可以在动画编辑器中添加相应关键帧,保证对齐的同时实现各种丰富的 UI 动画。

    通过脚本代码修改对齐距离