CocosCreator Widget总结

最新推荐文章于 2025-06-27 11:16:32 发布

原创最新推荐文章于 2025-06-27 11:16:32 发布 · 6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#CocosCreator #widget #updateAlignment #enabled

CocosCreator 专栏收录该内容

59 篇文章

订阅专栏

本文深入探讨了Cocos2d-x中Widget组件updateAlignment方法的潜在问题及其对节点位置的影响，特别是在递归更新父级Widget时的意外行为。文章通过具体示例展示了如何避免这些陷阱，并提出了一种仅更新当前节点Widget属性的有效方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里的总结，我们主要来说一下widget.updateAlignment()这个方法的坑和解决的办法。

在详细说明之前，有必要交代一下我测试的版本为1.9.3，然后，希望大家看到此文后能帮大家跨坑。

1.updateAlignment的坑

updateAlignment的坑在于：当调用了该方法后，不只本节点的位置会改变；如果父类有widget，则也会调用该方法。且如果父类只是改变了node的x属性，而不是修改widget的属性，则父类会根据widget的属性重置位置。

下面看实例：

再来看WidgetTest脚本：

cc.Class({
    extends: cc.Component,

    properties: {
        
    },

    start () {
        setTimeout(function () {
            console.log("vvv 1");
            this.node.x = 0;
        }.bind(this), 1000);

        setTimeout(function () {
            console.log("vvv 2");
            this.node.getChildByName("subWidget").getChildByName("subSubWidget").x = 100;
        }.bind(this), 3000);


        setTimeout(function () {
            console.log("vvv 3");
            this.node.getChildByName("subWidget").getChildByName("subSubWidget").
            getComponent(cc.Widget).updateAlignment();
        }.bind(this), 5000);
    },
});

执行完第一个setTimeout后：

执行完第二个setTimeout：

执行完第三个setTimeout:

经过测试，得出结果：

执行某个节点的Widget组件的updateAlignment方法后，其所以父类会递归updateAlignment()，最后导致所有父类的位置重置成原始Widget的位置。

2.扩展结论

最后，经过一系列的测试，得出扩展结论：

执行某个节点的widget的updateAlignment后，同级节点不会执行updateAlignment，子节点也不会执行updateAlignment。

3.跨坑神操作


cc.Class({
    extends: cc.Component,

    properties: {
        
    },

    start () {
        setTimeout(function () {
            console.log("vvv 1");
            this.node.x = 0;
        }.bind(this), 1000);

        setTimeout(function () {
            console.log("vvv 2");
            this.node.getChildByName("subWidget").getChildByName("subSubWidget").x = 100;
        }.bind(this), 3000);


        setTimeout(function () {
            console.log("vvv 3");
            this.node.getChildByName("subWidget").getChildByName("subSubWidget").
            getComponent(cc.Widget).enabled = true;
        }.bind(this), 5000);
    },
});

这样执行就可以只更新本节点的widget属性了！。。