有什么方法可以为组件创建自定义 css 值并使其可用于该组件正在使用的皮肤类?例如,如果我在 css 文件中定义它:
s|Panel{
skinClass: ClassReference("PanelSkin");
myCustomValue: #CCCCFF;
}
有没有办法在myCustomValue
中提供PanelSkin
?
有什么方法可以为组件创建自定义 css 值并使其可用于该组件正在使用的皮肤类?例如,如果我在 css 文件中定义它:
s|Panel{
skinClass: ClassReference("PanelSkin");
myCustomValue: #CCCCFF;
}
有没有办法在myCustomValue
中提供PanelSkin
?
即使组件类上没有 [Style] 元数据,您似乎也可以设置 CSS 属性并且它们将在皮肤中可用。作为测试,我创建了一个自定义皮肤并将其附加到 SkinnableComponent,然后通过 CSS 设置一个属性“特殊颜色”。在皮肤中,我绑定到“{getStyle('specialColor')”,它检索了我设置的属性值。
省略元数据可能会牺牲 CSS 上的自动完成功能。
我的测试代码:
皮肤测试.mxml:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/halo";
s|SkinnableComponent {
skin-class: ClassReference("skins.CustomSkin");
special-color: blue;
}
</fx:Style>
<s:SkinnableComponent width="300" height="300"/>
</s:Application>
自定义皮肤.mxml:
<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo" width="400" height="300">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Rect left="0" top="0" right="0" bottom="0">
<s:fill>
<s:SolidColor color="{getStyle('specialColor')}"/>
</s:fill>
</s:Rect>
</s:SparkSkin>
您必须使用 [Style] 元数据,这里有更多信息:Style metadata tag
您必须在 mxml 皮肤文件中定义您的主机组件类。[HostComponent("your.component.class")]
在此之后,您将能够使用 hostComponent.getStyle("myCustomValue") 获取 css 文件中定义的任何样式