Widget 组件参考

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

对齐边界

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

左对齐，左边界距离 100 px：

left-100px

下对齐，下边界距离 50%：

右下对齐，边界距离 0 px：

水平方向居中：

bottom-right-0px

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

约束尺寸

如果左右同时对齐，或者上下同时对齐，那么在相应方向上的尺寸就会被拉伸。下面演示一下，在场景中放置两个矩形 Sprite，大的作为对话框背景，小的作为对话框上的按钮。按钮节点作为对话框的子节点，并且按钮设置成 Sliced 模式以便展示拉伸效果。

宽度拉伸，左右边距 10%：

高度拉伸，上下边距 0，同时水平居中：

v-stretch

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

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

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

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

注意