64 lines
2.1 KiB
Markdown
64 lines
2.1 KiB
Markdown
|
对于一个自定义的皮肤，名称为**testSkin.exml**，有两种方式使用它
|
|||
|
|
~~~ typescript
|
|||
|
|
<?xml version="1.0" encoding="utf-8"?>
|
|||
|
|
<e:Skin class="mySkin.TestSkin" xmlns:e="http://ns.egret.com/eui">
|
|||
|
|
<e:DataGroup>
|
|||
|
|
<e:itemRendererSkinName>
|
|||
|
|
<e:Skin>
|
|||
|
|
<e:Label textColor="0xfd0000" text="{data.label}"/>
|
|||
|
|
</e:Skin>
|
|||
|
|
</e:itemRendererSkinName>
|
|||
|
|
<e:ArrayCollection>
|
|||
|
|
<e:Array>
|
|||
|
|
<e:Object label="item1"/>
|
|||
|
|
<e:Object label="item2"/>
|
|||
|
|
<e:Object label="item3"/>
|
|||
|
|
</e:Array>
|
|||
|
|
</e:ArrayCollection>
|
|||
|
|
</e:DataGroup>
|
|||
|
|
</e:Skin>
|
|||
|
|
~~~
|
|||
|
|
|
|||
|
|
|
|||
|
|
## 方式1 加载文件
|
|||
|
|
~~~ typescript
|
|||
|
|
class TestSkin extends eui.Component {
|
|||
|
|
constructor() {
|
|||
|
|
super();
|
|||
|
|
this.addEventListener(eui.UIEvent.COMPLETE,this.onComplete,this);
|
|||
|
|
this.skinName = "resource/testSkin.exml";
|
|||
|
|
}
|
|||
|
|
protected createChildren() {
|
|||
|
|
super.createChildren();
|
|||
|
|
console.log("createChildren")
|
|||
|
|
}
|
|||
|
|
private onComplete():void{
|
|||
|
|
console.log("onComplete");
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
~~~
|
|||
|
|
直接把**skinName**设置为exml文件的路径。这种方式要注意的是，在 createChildren 的时候，是获取不到内部组件的，因为此时 exml 文件还没有加载完成，要通过监听 **eui.UIEvent.COMPLETE** 这个事件获取组件创建完成的消息。
|
|||
|
|
像上面这个例子，console 会先输出 **createChildren** 再输出 **onComplete**
|
|||
|
|
|
|||
|
|
需要注意的是:如果已经在主题中加载了 EXML 文件，会先输出 onComplete 再输出 createChildren.
|
|||
|
|
|
|||
|
|
## 方式2 通过Theme主题管理使用
|
|||
|
|
~~~
|
|||
|
|
egret create euiDemo --type eui
|
|||
|
|
~~~
|
|||
|
|
创建一个 eui 项目，里面默认就会有主题管理解析的示例。
|
|||
|
|
[具体方式可以查看文档](../theme/README.md)
|
|||
|
|
|
|||
|
|
方式1的代码还可以正常使用，但是console 会先输出 **onComplete** 再输出 **createChildren**，和之前相反。这是因为主题已经加载过这个 exml 文件了，所以不需要重新加载。
|
|||
|
|
|
|||
|
|
另外因为在 exml 中定义了 **class="mySkin.TestSkin"**,所以还可以像下面这样使用
|
|||
|
|
~~~ typescript
|
|||
|
|
class TestSkin extends eui.Component {
|
|||
|
|
constructor() {
|
|||
|
|
super();
|
|||
|
|
this.skinName = "mySkin.TestSkin";
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
~~~
|
|||
|
|
|