首页 > 代码库 > Theme皮肤文件(json解析、多文件管理)

Theme皮肤文件(json解析、多文件管理)

2024-08-30 12:52:04   219人阅读

一  官方教程

http://developer.egret.com/cn/github/egret-docs/extension/EUI/skin/theme/index.html

 

二 thm主题文件解析

default.thm.json皮肤主题文件范例：

{
  "skins": {
    "eui.Button": "resource/eui_skins/ButtonSkin.exml"
  },
  "autoGenerateExmlsList": false,
  "exmls": [
    "src/HomeSceneSkin.exml"
  ]
}

 skins：

 将exml和ts绑定。

如果绑定，则在新建eui.component不需要设置skinName了。

如果没有绑定，则需要在eui.component的contruct中设置this.skinName = ""。

 

autoGenerateExmlsList
true：发布时将exmls下皮肤自动合并到default.thm.json文件中
false：不会将exmls下的皮肤自动合并到default.thm.json文件中

exmls：
在Main.ts加载主题文件时，预加载exmls列表中的皮肤
let theme = new eui.Theme("resource/default.thm.json", this.stage);


三 exml的几种使用方式：


1 直接引用




public constructor() {
    super();
    this.addEventListener(egret.Event.COMPLETE, this.onComplete, this);
    this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
    this.skinName = "src/HomeSceneSkin.exml";
}




执行顺序。在exml未预先加载的情况下，实时加载。


chilrenCreated 


addToStage


exml加载完成


onComplete


 


2 其他方式不怎么用。。具体看官方教程


 


 


四  皮肤多文件管理


多个json皮肤文件，分类加载不同皮肤，减轻一次性加载大量皮肤解析压力。


需要自己管理exml的加载顺序，因为exml之间可能有依赖关系。




let theme = new eui.Theme("resource/default.thm.json", this.stage);
let theme2 = new eui.Theme("resource/default2.thm.json",this.stage);
theme2.addEventListener(eui.UIEvent.COMPLETE, this.onThemeLoadComplete, this);




 


default.thm.json




{
  "skins": {
  },
  "autoGenerateExmlsList": false,
  "exmls": [
     "src/SimpleButtonSkin.exml"
  ]
}






default2.thm.json






{
  "skins": {
    
  },
  "autoGenerateExmlsList": false,
  "exmls": [
      "resource/eui_skins/ButtonSkin.exml",
     "src/HomeSceneSkin.exml"
  ]
}






技术分享


 


另外一说，wing2.5和3都会强行自动修改thm的json文件。。。


Theme皮肤文件(json解析、多文件管理)






























        

            
                
                  
                
                

                    联系

                    我们