Question

有没有办法为组件创建自定义css值并让它可用于组件正在使用的外观类？例如，如果我在css文件中定义它：

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

有没有办法在myCustomValue中提供PanelSkin？

Answer 1

即使没有组件类的[Style]元数据，似乎您可以设置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]元数据，这里有更多信息：Style metadata tag

Answer 3

您必须在mxml外观文件中定义主机组件类。 [HostComponent（ “your.component.class”）]

在此之后，您将能够通过使用获得在css文件中定义的任何样式 hostComponent.getStyle（ “myCustomValue”）

flex 4：自定义css值

3 个答案: