eui-eui.Skin

eui.Skin 基本上 skin 的套用方式有下列幾種

方式一直接寫 skin 程式碼

class My extends eui.Component {

    protected createChildren() {
        super.createChildren();
        // 方式一, 直接寫 skin 程式碼
        this.skinName = `
            <e:Skin width="640" height="1136" xmlns:e="http://ns.egret.com/eui">
                <e:Rect fillColor="0x000000" width="100%" height="100%" />
            </e:Skin>
        `;
    }

}

方式二將程式碼跟 skin 分開寫, MySkin.exml 和 My.ts

<?xml version='1.0' encoding='utf-8'?>
<e:Skin class="skins.MySkin" width="640" height="1136" xmlns:e="http://ns.egret.com/eui">
    <e:Rect fillColor="0x000000" width="100%" height="100%" />
</e:Skin>

class My extends eui.Component {

    protected createChildren() {
        super.createChildren();
        // 跟 MySkin 建立關聯
        this.skinName = skins.MySkin;
    }

}

方式三將 skin 分開寫, default.thm.json 的 skins 加上皮膚關聯

<?xml version='1.0' encoding='utf-8'?>
<e:Skin class="skins.MySkin" width="640" height="1136" xmlns:e="http://ns.egret.com/eui">
    <e:Rect fillColor="0x000000" width="100%" height="100%" />
</e:Skin>

	"skins": {
		"eui.Button": "resource/eui_skins/ButtonSkin.exml",
		"eui.CheckBox": "resource/eui_skins/CheckBoxSkin.exml",
		"eui.HScrollBar": "resource/eui_skins/HScrollBarSkin.exml",
		"eui.HSlider": "resource/eui_skins/HSliderSkin.exml",
		"eui.Panel": "resource/eui_skins/PanelSkin.exml",
		"eui.TextInput": "resource/eui_skins/TextInputSkin.exml",
		"eui.ProgressBar": "resource/eui_skins/ProgressBarSkin.exml",
		"eui.RadioButton": "resource/eui_skins/RadioButtonSkin.exml",
		"eui.Scroller": "resource/eui_skins/ScrollerSkin.exml",
		"eui.ToggleSwitch": "resource/eui_skins/ToggleSwitchSkin.exml",
		"eui.VScrollBar": "resource/eui_skins/VScrollBarSkin.exml",
		"eui.VSlider": "resource/eui_skins/VSliderSkin.exml",
		"eui.ItemRenderer": "resource/eui_skins/ItemRendererSkin.exml",
		"My": "resource/eui_skins/MySkin.exml" // 這段加上就不用在 ts 寫 code
	}