CocosCreator Widget总结

野性酷女 2022-05-13 16:39 653阅读 0赞

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

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

## 1.updateAlignment的坑 ##

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

下面看实例：

![70][] ![70 1][] ![70 2][]

再来看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后：

![70 3][]

执行完第二个setTimeout：

![70 4][]

执行完第三个setTimeout:

![70 5][]

经过测试，得出结果：

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

![70 6][]

## 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属性了！。。

[70]: https://img-blog.csdn.net/20181025160538858?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM2NTQxMjU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: https://img-blog.csdn.net/20181025172232341?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM2NTQxMjU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 2]: /images/20220504/6a071f6d3a8848f8bd5d9177eecdada5.png
[70 3]: /images/20220504/cdeba71f7a55436b897bbfd5c164180a.png
[70 4]: /images/20220504/788e0c4ecb3d432b842bfbe40b5af19c.png
[70 5]: /images/20220504/f1a79a301a6146ddbe138dd6c6fbf19c.png
[70 6]: /images/20220504/402358389b724896961d959e77da542f.png