egret Exml自定义组件

有个需求，在A组件里面包裹 B组件；

碰到了一些奇怪的问题，这些问题是由于编辑器bug引起的。创建了皮肤后并没有在default.thm.json直接添加进去，造成拖动组件莫名其妙的bug，这里忘记保留环境了，造成问题没法复现。

说一下自定义组件的过程吧。

1.在resource目录下创建TestGroupSkin.exml，TestGroupItemSkin.exml

<?xml version="1.0" encoding="utf-8"?>
<e:Skin class="TestGroupItemSkin" width="400" height="99" xmlns:e="http://ns.egret.com/eui">
	<e:Button label="Button" x="66" y="45"/>
	<e:Button label="Button" x="245" y="38"/>
</e:Skin>



<?xml version="1.0" encoding="utf-8"?>
<e:Skin class="TestGroupSkin" width="400" height="300" xmlns:e="http://ns.egret.com/eui" xmlns:ui="ui.*">
	<e:Button label="Button" x="47" y="12"/>
	<ui:TestGroupItem width="258" height="101" x="32" y="99.5" anchorOffsetX="0" anchorOffsetY="0" skinName="TestGroupItemSkin"/>
</e:Skin>

　　2.在src目录下创建分别对应的ts类，

module ui {
	export class TestGroup extends eui.Component{
		public constructor() {
			super();
			this.skinName = TestGroupSkin;
		}
	}
}


module ui {
	export class TestGroupItem extends eui.Component{
		public constructor() {
			super();
		}
	}
}

3.修改main.ts

　　

    /**
     * 创建场景界面
     * Create scene interface
     */
    protected createGameScene(): void {
       this.addChild(new ui.TestGroup());
    }

　　

4.编译执行。

切记，如果按照这个步骤不管用，那么不要捉急。先编译。然后检查default.thm.json，exml.e.d.ts中间可以查看皮肤组件是否添加进去。

 

运行结果

编译出来后文件变化：