egret-皮肤

皮肤分离概念

egret的eui.Component通过皮肤分离，将单个组件分为逻辑组件和外观组件。新建一个类继承Component或其子类，然后设置该类的skinName属性，即可将皮肤绑定到逻辑组件。

皮肤如何绑定组件

• 新建一个exml皮肤文件，随便拖点控件进去。

​ 切换到源码模式：

<?xml version='1.0' encoding='utf-8'?>
<e:Skin class="TestSkin"
	 width="100"
	height="50" xmlns:e="http://ns.egret.com/eui" >
	<e:Group id="myGroup" width="100" height="50" x="0" y="0">
		<e:Image id="imgDown" left="0" right="0" top="0" bottom="0" source="button_down_png" scale9Grid="5,5,6,6" x="-18" y="-166" scaleX="1" scaleY="1"/>
		<e:Image id="up" left="0" right="0" top="0" bottom="0" source="button_up_png" scale9Grid="5,5,6,6"/>
		<e:Label id="lblDesc" text="hello" verticalCenter="0" horizontalCenter="0"/>
	</e:Group>
</e:Skin>

最外层标签<e:Skin class="TestSkin"> .... </e:Skin>，egret解析这个文件时会创建一个TestSkin类，这个类继承Skin。

• 新建一个类TestComponent继承eui.Component，设置该类的属性skinName为皮肤文件。

class TestComponent extends eui.Component {

    public imgDown: eui.Image;
    public lblDesc: eui.Label;
    constructor() {
        super();
        this.addEventListener(eui.UIEvent.COMPLETE,this.onComplete,this);
        this.skinName = "resource/skins/TestSkin.exml";
    }
    protected createChildren() {
        super.createChildren();
        console.log("createChildren")
        console.log(this.lblDesc.text);
    }
    private onComplete():void{
        console.log("onComplete");
    }
}

egret会将TestSkin下的控件添加到TestComponent组件下，作为他的子节点。即TestComponent下的节点树为以下状态：

• TestComponent
  • Group
    • Image
    • Image
    • Lable

皮肤部件

组件类定义的属性名和皮肤控件的ID值一样时可以在代码里直接引用控件。

TestComponent上定义了一个lblDesc的公开变量，TestSkin里也有一个id为lblDesc的Label节点，在皮肤附加到逻辑组件上时，会自动匹配双方的同名变量和id，这些同名变量就叫做“皮肤部件”(SkinPart)，例如负责显示文本标签的lblDesc对象，匹配结果就是把TestSkin上的Label节点引用赋值给了TestComponent.lblDesc属性。正是因为这个皮肤部件的自动匹配功能，在按钮初始化完成后，才可以直接访问this.lblDesc属性。逻辑组件就是通过定义皮肤部件对皮肤里的子节点进行操作的。