CocosCreator Widget总结

这里的总结，我们主要来说一下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属性了！。。