【CocosCreator入门】CocosCreator组件 | Widget（对齐）组件

       Cocos Creator 是一款流行的游戏开发引擎，具有丰富的组件和工具，其中的Widget组件用于UI布局和调整，可以通过调整Widget组件来实现UI元素的自适应和排版。

---

目录

一、组件介绍

二、组件属性

三、组件使用

四、脚本示例

---

一、组件介绍

       在Cocos Creator中，所有的UI元素都是基于Canvas节点来实现的，而Widget组件就是Canvas节点下的一个子节点，它可以控制Canvas下所有子节点的位置、大小和对齐方式等属性，从而实现UI的灵活布局。

二、组件属性

属性	说明	备注
Top	对齐上边界	选中后，将在旁边显示一个输入框，用于设定当前节点的上边界和父物体的上边界之间的距离。
Bottom	对齐下边界	选中后，将在旁边显示一个输入框，用于设定当前节点的下边界和父物体的下边界之间的距离。
Left	对齐左边界	选中后，将在旁边显示一个输入框，用于设定当前节点的左边界和父物体的左边界之间的距离。
Right	对齐右边界	选中后，将在旁边显示一个输入框，用于设定当前节点的右边界和父物体的右边界之间的距离。
HorizontalCenter	水平方向居中
VerticalCenter	竖直方向居中
Target	对齐目标	指定对齐参照的节点，当这里未指定目标时会使用直接父级节点作为对齐目标。 当父节点是整个场景时，则对齐到屏幕的可见区域（visibleRect），可用于将 UI 停靠在屏幕边缘。
Align Mode	指定 widget 的对齐方式，用于决定运行时 widget 应何时更新	通常设置为 ON_WINDOWS_RESIZE，仅在初始化和每当窗口大小改变时重新对齐。 设置为 ONCE 时，仅在组件初始化时进行一次对齐。 设置为 ALWAYS 时，每帧都会对当前 Widget 组件执行对齐逻辑。

①Align Mode

       对齐方式，决定Widget组件对齐的参考对象。例如，如果选择了“HORIZONTAL_CENTER”，则Widget组件会相对于Canvas节点的水平中心对齐。

②Left、Right、Top、Bottom

       控制Widget组件相对于参考对象的边距。例如，如果选择了“HORIZONTAL_CENTER”对齐方式，并设置了Left和Right属性，则Widget组件会相对于Canvas节点的水平中心对齐，并且距离Canvas节点的左右边缘分别为Left和Right。

③Horizontal、Vertical

       控制Widget组件的位置。例如，如果选择了“HORIZONTAL_CENTER”对齐方式，并设置了Horizontal属性，则Widget组件会相对于Canvas节点的水平中心对齐，并且距离Canvas节点的水平中心的距离为Horizontal。

④Target

       参考对象，指定Widget组件对齐的参考对象。可以选择Canvas节点、Parent节点或其他节点作为参考对象。

⑤Is Absolute Width、Is Absolute Height

       是否使用绝对宽度和高度。如果选择了这两个属性，那么Widget组件将会忽略Canvas节点的缩放，直接使用设置的宽度和高度。如果不选择这两个属性，那么Widget组件将会根据Canvas节点的缩放自动计算宽度和高度。

⑥Is Align Once

       是否只对齐一次。如果选择了这个属性，那么Widget组件只会在初始化时对齐一次，不会在Canvas节点缩放或其他事件发生时重新对齐。如果不选择这个属性，那么Widget组件会在每次Canvas节点缩放或其他事件发生时重新对齐。

⑦Left、Right、Top、Bottom、Horizontal、Vertical Priority

       控制Widget组件的优先级。如果有多个Widget组件设置了相同的对齐方式或边距，那么优先级高的Widget组件会覆盖优先级低的Widget组件。

三、组件使用

使用Widget组件的步骤如下：

1. 在Canvas节点下创建一个子节点。
2. 在子节点上添加Widget组件。
3. 根据需要设置Widget组件的属性，例如对齐方式、边距、位置等。
4. 在子节点下添加其他UI元素，例如Label、Button等。 通过调整Widget组件的属性，可以实现UI元素的自适应和排版。

四、脚本示例

创建节点和Widget组件

       首先，我们需要创建一个节点，并添加Widget组件。可以使用以下代码：

let node = new cc.Node(); // 创建节点
let widget = node.addComponent(cc.Widget); // 添加Widget组件

设置对齐方式和边距

       接下来，我们需要设置Widget组件的对齐方式和边距。可以使用以下代码：

widget.alignMode = cc.Widget.AlignMode.HORIZONTAL_CENTER; // 设置水平居中对齐
widget.left = 10; // 设置左边距为10
widget.right = 10; // 设置右边距为10

设置大小和位置

       最后，我们需要设置节点的大小和位置，以便Widget组件可以正确地对齐和布局UI元素。可以使用以下代码：

node.setContentSize(200, 100); // 设置节点大小为200x100
node.setPosition(cc.v2(0, 0)); // 设置节点位置为屏幕中心

        通过以上代码，我们成功地创建了一个居中对齐、左右边距为10的节点，并设置了节点大小和位置。我们可以在这个节点下添加其他UI元素，实现UI的自适应和排版。

下面是一个使用Widget组件实现自适应UI布局的示例代码：

cc.Class({
    extends: cc.Component,
    properties: {
        node: cc.Node, // 需要自适应的节点
        align: cc.Widget.AlignMode, // 对齐方式
        left: cc.Integer, // 左边距
        right: cc.Integer, // 右边距
        top: cc.Integer, // 上边距
        bottom: cc.Integer, // 下边距
        width: cc.Integer, // 宽度
        height: cc.Integer, // 高度
        x: cc.Integer, // X坐标
        y: cc.Integer, // Y坐标
    },
    onLoad () {
        let widget = this.node.addComponent(cc.Widget);
        widget.alignMode = this.align;
        widget.left = this.left;
        widget.right = this.right;
        widget.top = this.top;
        widget.bottom = this.bottom;
        this.node.setContentSize(this.width, this.height);
        this.node.setPosition(cc.v2(this.x, this.y));
    },
    // update (dt) {},
});

---

       总之，使用Cocos Creator的Widget组件可以帮助我们快速实现自适应UI布局。通过设置对齐方式、边距、大小和位置等属性，可以让UI元素根据屏幕大小和分辨率进行自适应，从而提高游戏的兼容性和用户体验。