我这边是直接用Eegret UI Editor写好了自己的exml文件,如下图所示
根据白鹭官方的B站教程,使用这个exml文件的核心就是要将添加到stage舞台的类和这个exml文件绑定起来,有两种方式,接下来听我好好地给大伙娓娓道来(装上一逼)。
两种方法都需要做的文件准备:
- 第一种方式:(自定义场景类绑定exml文件)
先创建好需要加载到舞台的自定义的类:
class BallGame extends eui.Component implements eui.UIComponent{ constructor(){
super()
//这一行是第一种方法需要用到的而已,第二种就不用了
this.skinName="resource/eui_skins/my_skin/new_skin.exml" }
protected partAdded(partName: string, instance: any): void {
super.partAdded(partName,instance) } protected childrenCreated(): void {
super.childrenCreated() } }
eui.Component是继承自 egret.DisplayObjectContainer容器类并实现一个UIComponent接口的一个类,而UIComponent是一个源码的接口
如果你问我为什么要继承类这个又实现那个接口的话,那我只能说,“想知道我的秘密吗?想要的话就给你好了,去找吧!我把这段代码的秘密都放在了源码里了”
类创建成功后,设置属性skinName,源码里的定义是
/**
* 皮肤标识符。有效值可为:皮肤类定义,皮肤类名,皮肤实例,EXML文件内容,或外部EXML文件路径,
* @version Egret 2.4
* @version eui 1.0
* @platform Web,Native
* @language zh_CN
*/
skinName: any;
之后源码会对skinName进行一个解析(对,想知道就去看源码,这里不方便说太多,因为我懒)
做完上面步骤之后,最重要一步来了,就是别忘了在入口类里将你的场景类添加到舞台上,
protected createGameScene(): void {
let gameball=new BallGame()
this.addChild(gameball)
//两种方式均可
// this.addChild(new BallGame())
}
- 第二种方式:(自定义场景类+直接修改default.thm.json)
把方式一里的this.skinName="***“给删掉,主打的就是一个"低代码”
找到resource目录下的default.thm.json文件,直接修改!
{
"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",
"BallGame": "resource/eui_skins/my_skin/new_skin.exml"
},
"autoGenerateExmlsList": true,
"exmls": [
"resource/eui_skins/ButtonSkin.exml",
"resource/eui_skins/CheckBoxSkin.exml",
"resource/eui_skins/HScrollBarSkin.exml",
"resource/eui_skins/HSliderSkin.exml",
"resource/eui_skins/ItemRendererSkin.exml",
"resource/eui_skins/my_skin/new_skin.exml",
"resource/eui_skins/PanelSkin.exml",
"resource/eui_skins/ProgressBarSkin.exml",
"resource/eui_skins/RadioButtonSkin.exml",
"resource/eui_skins/ScrollerSkin.exml",
"resource/eui_skins/TextInputSkin.exml",
"resource/eui_skins/ToggleSwitchSkin.exml",
"resource/eui_skins/VScrollBarSkin.exml",
"resource/eui_skins/VSliderSkin.exml",
"resource/eui_skins/my_skin/new_skin.exml"
],
"path": "resource/default.thm.json"
}
注意每个组的最后一行,都是我新添加进去的,然后Ctrl+S保存,直接运行,搞定
👴最爱的篮球火3vs3场面出来辣
本次装杯到此结束,谢谢大家。