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

jekeyhui99 发表于 2018-8-3 11:16:56

一  官方教程<a href="http://developer.egret.com/cn/github/egret-docs/extension/EUI/skin/theme/index.html" target="_blank" style="box-sizing: border-box; color: rgb(52, 104, 164);">http://developer.egret.com/cn/github/egret-docs/extension/EUI/skin/theme/index.html</a> 二 thm主题文件解析default.thm.json皮肤主题文件范例：<div class="cnblogs_code" style="box-sizing: border-box; background-color: rgb(245, 245, 245); border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; margin-top: 5px; margin-bottom: 5px; color: rgb(0, 0, 0); font-family: "Courier New" !important; font-size: 12px !important;"><div class="cnblogs_code_toolbar" style="box-sizing: border-box; margin-top: 5px;"><a title="复制代码" style="box-sizing: border-box; color: rgb(52, 104, 164); border: none !important;"><img src="https://common.cnblogs.com/images/copycode.gif" alt="复制代码" style="box-sizing: border-box; max-width: 900px;"></a></div><pre style="white-space: pre-wrap; box-sizing: border-box; font-family: "Courier New" !important;">{
"skins": {
"eui.Button": "resource/eui_skins/ButtonSkin.exml"
},
"autoGenerateExmlsList": false,
"exmls": [
"src/HomeSceneSkin.exml"
]
}</pre><div class="cnblogs_code_toolbar" style="box-sizing: border-box; margin-top: 5px;"><a title="复制代码" style="box-sizing: border-box; color: rgb(52, 104, 164); border: none !important;"><img src="https://common.cnblogs.com/images/copycode.gif" alt="复制代码" style="box-sizing: border-box; max-width: 900px;"></a></div></div> skins： 将exml和ts绑定。如果绑定，则在新建eui.component不需要设置skinName了。如果没有绑定，则需要在eui.component的contruct中设置this.skinName = ""。 <pre style="white-space: pre-wrap; box-sizing: border-box; color: rgb(75, 75, 75); font-size: 13px;">autoGenerateExmlsList true：发布时将exmls下皮肤自动合并到default.thm.json文件中 false：不会将exmls下的皮肤自动合并到default.thm.json文件中 exmls： 在Main.ts加载主题文件时，预加载exmls列表中的皮肤 </pre><div class="cnblogs_code" style="box-sizing: border-box; background-color: rgb(245, 245, 245); border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; margin-top: 5px; margin-bottom: 5px; color: rgb(0, 0, 0); font-family: "Courier New" !important; font-size: 12px !important;"><pre style="white-space: pre-wrap; box-sizing: border-box; font-family: "Courier New" !important;">let theme = new eui.Theme("resource/default.thm.json", this.stage);</pre></div><pre style="white-space: pre-wrap; box-sizing: border-box; color: rgb(75, 75, 75); font-size: 13px;"></pre>三 exml的几种使用方式：1 直接引用<div class="cnblogs_code" style="box-sizing: border-box; background-color: rgb(245, 245, 245); border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; margin-top: 5px; margin-bottom: 5px; color: rgb(0, 0, 0); font-family: "Courier New" !important; font-size: 12px !important;"><pre style="white-space: pre-wrap; box-sizing: border-box; font-family: "Courier New" !important;">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";
}</pre></div>执行顺序。在exml未预先加载的情况下，实时加载。chilrenCreated addToStageexml加载完成onComplete 2 其他方式不怎么用。。具体看官方教程  四  皮肤多文件管理多个json皮肤文件，分类加载不同皮肤，减轻一次性加载大量皮肤解析压力。需要自己管理exml的加载顺序，因为exml之间可能有依赖关系。<div class="cnblogs_code" style="box-sizing: border-box; background-color: rgb(245, 245, 245); border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; margin-top: 5px; margin-bottom: 5px; color: rgb(0, 0, 0); font-family: "Courier New" !important; font-size: 12px !important;"><pre style="white-space: pre-wrap; box-sizing: border-box; font-family: "Courier New" !important;">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);</pre></div> <pre style="white-space: pre-wrap; box-sizing: border-box; color: rgb(75, 75, 75); font-size: 13px;">default.thm.json</pre><div class="cnblogs_code" style="box-sizing: border-box; background-color: rgb(245, 245, 245); border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; margin-top: 5px; margin-bottom: 5px; color: rgb(0, 0, 0); font-family: "Courier New" !important; font-size: 12px !important;"><div class="cnblogs_code_toolbar" style="box-sizing: border-box; margin-top: 5px;"><a title="复制代码" style="box-sizing: border-box; color: rgb(52, 104, 164); border: none !important;"><img src="https://common.cnblogs.com/images/copycode.gif" alt="复制代码" style="box-sizing: border-box; max-width: 900px;"></a></div><pre style="white-space: pre-wrap; box-sizing: border-box; font-family: "Courier New" !important;">{
"skins": {
},
"autoGenerateExmlsList": false,
"exmls": [
"src/SimpleButtonSkin.exml"
]
}</pre><div class="cnblogs_code_toolbar" style="box-sizing: border-box; margin-top: 5px;"><a title="复制代码" style="box-sizing: border-box; color: rgb(52, 104, 164); border: none !important;"><img src="https://common.cnblogs.com/images/copycode.gif" alt="复制代码" style="box-sizing: border-box; max-width: 900px;"></a></div></div><pre style="white-space: pre-wrap; box-sizing: border-box; color: rgb(75, 75, 75); font-size: 13px;"></pre>default2.thm.json<pre style="white-space: pre-wrap; box-sizing: border-box; color: rgb(75, 75, 75); font-size: 13px;"></pre><div class="cnblogs_code" style="box-sizing: border-box; background-color: rgb(245, 245, 245); border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; margin-top: 5px; margin-bottom: 5px; color: rgb(0, 0, 0); font-family: "Courier New" !important; font-size: 12px !important;"><div class="cnblogs_code_toolbar" style="box-sizing: border-box; margin-top: 5px;"><a title="复制代码" style="box-sizing: border-box; color: rgb(52, 104, 164); border: none !important;"><img src="https://common.cnblogs.com/images/copycode.gif" alt="复制代码" style="box-sizing: border-box; max-width: 900px;"></a></div><pre style="white-space: pre-wrap; box-sizing: border-box; font-family: "Courier New" !important;">{
"skins": {

},
"autoGenerateExmlsList": false,
"exmls": [
"resource/eui_skins/ButtonSkin.exml",
"src/HomeSceneSkin.exml"
]
}</pre><div class="cnblogs_code_toolbar" style="box-sizing: border-box; margin-top: 5px;"><a title="复制代码" style="box-sizing: border-box; color: rgb(52, 104, 164); border: none !important;"><img src="https://common.cnblogs.com/images/copycode.gif" alt="复制代码" style="box-sizing: border-box; max-width: 900px;"></a></div></div><pre style="white-space: pre-wrap; box-sizing: border-box; color: rgb(75, 75, 75); font-size: 13px;"></pre><img src="https://images2015.cnblogs.com/blog/1062174/201701/1062174-20170103171338003-1871544237.png" alt="" style="border: 0px; box-sizing: border-box; max-width: 900px;"> <pre style="white-space: pre-wrap; box-sizing: border-box; color: rgb(75, 75, 75); font-size: 13px;">另外一说，wing2.5和3都会强行自动修改thm的json文件。。。</pre>

页: [1]

吾知网's Archiver

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