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组件的步骤如下：

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

四、脚本示例

首先，我们需要创建一个节点，并添加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元素根据屏幕大小和分辨率进行自适应，从而提高游戏的兼容性和用户体验。