当前位置：首页 > news >正文

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

news 2025/7/10 0:22:45

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

应用：以上官方指引有非常清晰的使用方式，接下来说明一些注意事项：
1、与canvas搭配的使用，解决多分别率适配问题。
关于canvas。而需要注意的是，官方有给出说明，当canvas的alignCanvasWithScreen被设置为true时，canvas 组件随时获得设备屏幕的实际分辨率并对场景中所有渲染元素进行适当的缩放。关于多分辨率适配方案。
不同分辨率下，希望UI相对屏幕边框位置不变时，只需要将UI节点放在canvas下，通过节点的widget组件即可实现。
需要特别注意：canvas千万不要添加widget组件，否则canvas的size无法随屏幕变化而变化。
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 disabledconst widget = node.getComponent(Widget);if (widget && parent) {align(node, widget);}
}