关于gui的skinnableContainer的一点问题

创建一个UIAsset

 var uiAsset = new egret.gui.UIAsset();
 uiAsset.source = "bgImage";

把UIAsset添加到SkinnableContainer上

 var container = new egret.gui.SkinnableContainer();
 container.addElement(uiAsset);

然后把container添加到stage上会发现uiAsset并没有显示出来。这是什么原因呢？

这时我去看了一下SkinnableContainer的代码，发现

public addElement(element:IVisualElement):IVisualElement {
      return this._getCurrentContentGroup().addElement(element);
}

public _getCurrentContentGroup():Group {
      if (this.contentGroup == null) {
           if (this._placeHolderGroup == null) {
                this._placeHolderGroup = new Group();
                this._placeHolderGroup.visible = false;
                this._addToDisplayList(<DisplayObject><any>this._placeHolderGroup);
           }
                this._placeHolderGroup.addEventListener(
                    ElementExistenceEvent.ELEMENT_ADD, this._contentGroup_elementAddedHandler, this);
                this._placeHolderGroup.addEventListener(
                    ElementExistenceEvent.ELEMENT_REMOVE, this._contentGroup_elementRemovedHandler, this);
                return this._placeHolderGroup;
      }
      else {
           return this.contentGroup;　　　　　　
      }
}

SkinnableContainer的addElement是默认如果没有contentGroup的话是加在_placeHolderGroup上的，而placeHolderGroup默认的visible是false的，而在partAdded中如果发现有皮肤里有contentGroup，则会把placeHolderGroup的children放到contentGroup里。

皮肤里若没有contentGroup，则skinnableContainer所有的addElement的子项都不会显示。

我们给container赋一个皮肤。

 var container = new egret.gui.SkinnableContainer();
 container.skinName = testSkin;
 container.addElement(uiAsset);

//皮肤类
class testSkin extends egret.gui.Skin {

    private contentGroup:egret.gui.Group;
    public get skinParts() {
        return ["contentGroup"]
    }

    constructor() {
        super();
    }

    public createChildren():void {
        super.createChildren();

        var group = new egret.gui.Group();
        this.contentGroup = group;
        this.addElement(group);
    }
}

testSkin当中有一个contentGroup，这样uiAsset才会显示出来。