cocos creator 的 widget组件的使用及踩坑

以下的内容基于cocos creator 3.8版本，如有错误，恳请指出。
👉官方文档的指引

应用：以上官方指引有非常清晰的使用方式，接下来说明一些注意事项：
1、与canvas搭配的使用，解决多分别率适配问题。
关于canvas。而需要注意的是，官方有给出说明，当canvas的alignCanvasWithScreen被设置为true时，canvas 组件随时获得设备屏幕的实际分辨率并对场景中所有渲染元素进行适当的缩放。关于多分辨率适配方案。
不同分辨率下，希望UI相对屏幕边框位置不变时，只需要将UI节点放在canvas下，通过节点的widget组件即可实现。
canvas的代码位于引擎canvas.ts文件中，其中适配屏幕的代码如下：

protected _onResizeCamera () {
        if (this._cameraComponent && this._alignCanvasWithScreen) {
            if (this._cameraComponent.targetTexture) {
                this._cameraComponent.orthoHeight = visibleRect.height / 2;
            } else {
                const size = screen.windowSize;
                this._cameraComponent.orthoHeight = size.height / view.getScaleY() / 2;
            }

            this.node.getWorldPosition(_worldPos);
            this._cameraComponent.node.setWorldPosition(_worldPos.x, _worldPos.y, 1000);
        }
    }

2、宽屏窄屏两套适配方案的实现：
有些情况下，从效果考虑，希望UI在窄屏分辨率时，尽量不留白，宽屏分辨率时，适当留白，这种情况下可以使用以下方案：
（1）定义窄屏和宽屏的宽高比例；（此过程通常需要与设计/美术讨论）。
（2）创建一个公共的UI界面，添加canvas。
（3）将界面分割为9宫格的9个节点，9个节点都加入widget组件。
（4）创建json文件，配置9个节点在不同分辨率下与边界的距离。
（5）具体的UI节点按需求放入9个节点中，再调整相对位置即可。
（6）并在加载前读取配置的信息，对9个节点进行widget的边界设置。
（7）界面监听屏幕变化信息，在屏幕变化是更新适配updateAlignment。
（8）各个UI节点的各自播放动画，可以不需要特殊适配。

3、遇到的坑：
（1）如果一个节点不需要widget组件，那必须要将该组件删除；如果不删除widget组件，只是将enabled勾去掉，那当其子节点调用updateAlignment时，改节点的widget组件就会重新生效，可能有意想不到的效果。具体代码在widget-manager.ts中，updateAlignment并不对父节点的widget组件是否生效做校验。

function updateAlignment (node: Node) {
    const parent = node.parent;
    if (parent && Node.isNode(parent)) {
        updateAlignment(parent);
    }

    // node._widget will be null when widget is disabled
    const widget = node.getComponent(Widget);
    if (widget && parent) {
        align(node, widget);
    }
}

（2）canvas添加widget的使用。
之前我理解错了，认为canvas不需要添加widget，但其实在特殊情况下是需要使用的。
例如：a.我们游戏的设计分辨率是1280*720，设计的宽高比小于市面上大部分手机屏幕，此时我们的project setting设置为宽度适配，即裁掉高出屏幕部分。

如果此时，我的ui组件设置了靠上/下的边界，会被裁剪。

此时，需要在canvas加上widget组件，将canvas的上下边界缩窄到屏幕边界。