egret-docs-master

2.5 KiB

Raw Permalink Blame History

在皮肤部件一节中介绍了如何将皮肤设置到逻辑组件上。但如果有一个全局通用的默认皮肤，我们需要每次实例化组件时都赋值一次皮肤，这样比较麻烦。因此我们提供了一个主题机制，能够让您为指定的组件配置默认皮肤，全局指定一次即可，之后直接实例化组件，不再需要显式设置组件的skinName属性。

配置主题

下面是一个主题配置文件的例子：

default.thm.json:

{
	"skins": {
		"eui.Panel": "resource/eui_skins/PanelSkin.exml",
		"eui.ProgressBar": "resource/eui_skins/ProgressBarSkin.exml",
		"eui.ItemRenderer": "resource/eui_skins/ItemRendererSkin.exml"
	},
	"autoGenerateExmlsList": true,
	"exmls": [
		"resource/eui_skins/ItemRendererSkin.exml",
		"resource/eui_skins/PanelSkin.exml",
		"resource/eui_skins/ProgressBarSkin.exml"
	]
}

主题配置文件就是一个标准的JSON文件，

skins 指定组件的默认皮肤，其中键是组件的类名，值是需要赋值给这个组件skinName属性的值。可以是exml文件路径，也可以是EXML文件上注册的类名（根节点上的class属性）。
exmls 表示需要主题预加载的 EXML 文件列表。Theme 文件加载之后，它会优先加载这个列表中的EXML文件，由于 EXML 可能会存在相互依赖，所以 Theme 会按照列表中的顺序编译 EXML。可以监听 egret.Event.COMPLETE 来确认该列表中的EXML已经加载完成。
autoGenerateExmlsList 表示是否需要使用命令行工具自动生成 EXML 列表。

这里需要注意的是，引擎只会识别 xxx.thm.json 文件作为 theme 文件.

启用主题

创建一个 EUI 项目，里面会自动配置好相关参数：

//注入自定义的素材解析器
let assetAdapter = new AssetAdapter();
egret.registerImplementation("eui.IAssetAdapter", assetAdapter);
egret.registerImplementation("eui.IThemeAdapter", new ThemeAdapter());

...
let theme = new eui.Theme("resource/default.thm.json", this.stage);

创建了Theme之后，它会开始异步加载指定的主题文件并解析，在加载的过程中，如果已经有组件在创建，也不需要额外处理，这部分组件在主题加载完成后会自动重新查询一次默认皮肤。

特别注意，主题配置文件只是起到设置默认值的作用，并不能运行时切换所有默认皮肤。因为这么做需要遍历整个显示列表，开销较大。

2.5 KiB Raw Permalink Blame History Unescape Escape

配置主题

启用主题

2.5 KiB

Raw Permalink Blame History