在 Flex 4 中定义自定义 CSS 属性答案

【问题标题】：Defining custom css properties in Flex 4在 Flex 4 中定义自定义 CSS 属性
【发布时间】：2012-12-24 00:25:01
【问题描述】：

我正在创建一个 Flex 主题并定义默认组件外观。所有按钮都应具有默认外观。可以使用 styleName 将特殊样式应用于按钮，它为按钮皮肤定义一组颜色。

我创建了一个 Spark Button 皮肤，如下所示：

<!-- ButtonSkin.mxml -->

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
            xmlns:fb="http://ns.adobe.com/flashbuilder/2009" minWidth="21" minHeight="24" alpha.disabled="0.5">

    <fx:Metadata>
        <![CDATA[
            [HostComponent("spark.components.Button")]
            [Style(name="backgroundGradient", states="up, over, down", format="Array", inherit="yes")]
        ]]>
    </fx:Metadata>

    <fx:Script>
        <![CDATA[
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
            {
                var backgroundGradient:Array = getStyle("backgroundGradient");
                topGradientEntry.color = backgroundGradient[0];
                bottomGradientEntry.color = backgroundGradient[1];

                super.updateDisplayList(unscaledWidth, unscaledHeight);
            }
        ]]>
    </fx:Script>

    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>

    <!-- shapes using topGradientEntry.color and bottomGradientEntry.color -->
</s:Skin>

像这样设置主css文件：

/** default.css **/

s|Button {
    skinClass: ClassReference('mytheme.skins.ButtonSkin');
    fontWeight: bold;
}

skins|ButtonSkin {
    backgroundGradient: 0x000000, 0xFFFFFF;
}

s|Button.btn-primary:up {
    backgroundGradient: 0x000000, 0xFFFFFF;
}
s|Button.btn-primary:over {
    backgroundGradient: 0x000000, 0xFFFFFF;
}
s|Button.btn-primary:down {
    backgroundGradient: 0x000000, 0xFFFFFF;
}

s|Button.btn-inverted:up {
    backgroundGradient: 0xFFFFFF, 0x000000;
}
s|Button.btn-inverted:over {
    backgroundGradient: 0xFFFFFF, 0x000000;
}
s|Button.btn-inverted:down {
    backgroundGradient: 0xFFFFFF, 0x000000;
}

应用程序会像这样设置按钮样式：

<!-- Main.mxml -->

<s:Button label="Default" x="10" y="10" width="75" height="26"/>
<s:Button label="Button" x="110" y="10" width="75" height="26" styleName="btn-success"/>
<s:Button label="Primary" x="210" y="10" width="75" height="26" styleName="btn-primary"/>

但我在所有情况下都收到错误“不支持 'backgroundGradient' 的 CSS 值”。

【问题讨论】：

标签： actionscript-3 apache-flex flex4 flex4.5 mxml

【解决方案1】：

我不敢相信我在这个问题上花了多少时间。问题是 CSS 中的值应该使用带有 # 格式的 HEX，即 #FFFFFF 而不是 0xFFFFFF。 Actionscript 使用 0x 格式，MXML 使用两者，CSS 使用 HEX 和 # 格式。

【讨论】：