flex 4：自定義css值

Question

有沒有辦法爲組件創建一個自定義的css值，並讓組件正在使用的皮膚類可用？例如，如果我在一個CSS文件中定義的：

s|Panel{ 
    skinClass: ClassReference("PanelSkin"); 
    myCustomValue: #CCCCFF; 
} 

有沒有一種方法，使myCustomValue可供PanelSkin？

Answer 1

即使沒有組件類[風格]元數據，似乎可以設置CSS屬性，它們會在提供皮。作爲測試，我創建了一個自定義外觀並將其附加到SkinnableComponent，然後通過CSS設置屬性「特殊顏色」。在皮膚中，我綁定了「{getStyle（'specialColor'）」，並且它檢索了我設置的屬性值。

通過省略元數據可能會犧牲的所有元素都是CSS上的自動完成。

我的測試代碼：

SkinTest.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> 

CustomSkin.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> 

Answer 2

您必須使用[風格]元數據，這裏是這方面的更多信息：Style metadata tag

Answer 3

你必須定義你的主機組件類在MXML皮膚文件。 [HostComponent（ 「your.component.class」）

在此之後，你就可以通過使用 hostComponent.getStyle獲得在CSS文件中定義的任何樣式（ 「myCustomValue」）