为什么ActionBar图标上有Alpha？

Question

我正在尝试通过创建自定义ButtonBar外观来设置TabbedViewNavigator TabBar的样式。这是我的ButtonBar皮肤的代码：

 <?xml version="1.0" encoding="utf-8"?>

 <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">

<fx:Metadata>[HostComponent("spark.components.ButtonBar")]</fx:Metadata> 
<fx:Script fb:purpose="styling">
    <![CDATA[
        import mx.core.IFlexDisplayObject;
        import mx.core.ILayoutElement;
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            super.updateDisplayList(unscaledWidth, unscaledHeight);
            layoutContents(unscaledWidth, unscaledHeight);
        }
        protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
        {
            setElementPosition(scroller, 0, 0);
            setElementSize(scroller, unscaledWidth, unscaledHeight);
            var backgroundAlphaValue:* = getStyle("backgroundAlpha");
            var backgroundAlpha:Number = (backgroundAlphaValue === undefined)
                ? 1 : getStyle("backgroundAlpha");

            graphics.beginFill(getStyle("chromeColor"), backgroundAlpha);
            graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
            graphics.endFill();
        }

        protected function setElementPosition(element:Object, x:Number, y:Number):void
        {
            if (element is ILayoutElement)
            {
                ILayoutElement(element).setLayoutBoundsPosition(x, y, false);
            }
            else if (element is IFlexDisplayObject)
            {
                IFlexDisplayObject(element).move(x, y);   
            }
            else
            {
                element.x = x;
                element.y = y;
            }
        }
        protected function setElementSize(element:Object, width:Number, height:Number):void
        {
            if (element is ILayoutElement)
            {
                ILayoutElement(element).setLayoutBoundsSize(width, height, false);
            }
            else if (element is IFlexDisplayObject)
            {
                IFlexDisplayObject(element).setActualSize(width, height);
            }
            else
            {
                element.width = width;
                element.height = height;
            }
        }
    ]]>
</fx:Script>

<s:states>
    <s:State name="normal" />
    <s:State name="disabled" />
</s:states>

<fx:Declarations>
    <!--- 
        @copy spark.components.ButtonBar#firstButton
        @default spark.skins.spark.ButtonBarFirstButtonSkin
        @see spark.skins.spark.ButtonBarFirstButtonSkin
    -->
    <fx:Component id="firstButton">
        <s:ButtonBarButton skinClass="spark.skins.spark.ButtonBarFirstButtonSkin" /><!--css.nxInspect.mobile.redCss.skins.nxButtonBarSkin.ButtonBarFirstButtonSkin-->
    </fx:Component>

    <!--- 
        @copy spark.components.ButtonBar#middleButton
        @default spark.skins.spark.ButtonBarMiddleButtonSkin
        @see spark.skins.spark.ButtonBarMiddleButtonSkin
    -->
    <fx:Component id="middleButton" >
        <s:ButtonBarButton skinClass="spark.skins.spark.ButtonBarMiddleButtonSkin" /><!-- css.nxInspect.mobile.redCss.skins.nxButtonBarSkin.ButtonBarMiddleButtonSkin-->
    </fx:Component>

    <!--- 
        @copy spark.components.ButtonBar#lastButton
        @default spark.skins.spark.ButtonBarLastButtonSkin
        @see spark.skins.spark.ButtonBarLastButtonSkin
    -->
    <fx:Component id="lastButton" >
        <s:ButtonBarButton skinClass="spark.skins.spark.ButtonBarLastButtonSkin" /><!--css.nxInspect.mobile.redCss.skins.nxButtonBarSkin.ButtonBarLastButtonSkin-->
    </fx:Component>

</fx:Declarations>

<!--- @copy spark.components.SkinnableDataContainer#dataGroup -->
<s:Scroller id="scroller"  interactionMode="touch"
    skinClass="css.nxInspect.mobile.blackgoldCss.skins.nxScrollerTabBarSkin.ScrollerTabBarSkin">
    <s:DataGroup id="dataGroup" width="100%" height="100%">
        <s:layout>
            <!--<s:ButtonBarHorizontalLayout gap="-1"/>-->
            <s:HorizontalLayout useVirtualLayout="false" gap="0" variableColumnWidth="false"
                                columnWidth="400" verticalAlign="justify"/>
        </s:layout>
    </s:DataGroup>  
</s:Scroller>

我无法理解为什么按钮图标有alpha！：

Answer 1

确定，

我制作了自己的ButtonBarButtonSkins并添加了。

 static private const exclusions:Array = ["labelDisplay",'iconDisplay'];

有了这个，我设法为我的图标获得了正确的颜色。