禁用状态时，将过渡状态添加到“ Spark Button”（火花按钮）

package
{
import spark.components.Button;

[SkinState(\"overDisabled\")]
public class ButtonWithOverInDisabled extends Button
{
    private var _enabledInvalidaationPhase:Boolean = false;

    private var _explicitMouseChildren:Boolean = true;

    private var _explicitMouseEnabled:Boolean = true;

    override public function get enabled():Boolean
    {
        if (_enabledInvalidaationPhase)
            return true;
        return super.enabled;
    }

    override public function set enabled(value:Boolean):void
    {
        _enabledInvalidaationPhase = true;
        super.enabled = value;
        super.mouseChildren = _explicitMouseChildren;
        super.mouseEnabled = _explicitMouseEnabled;
        _enabledInvalidaationPhase = false;
    }

    override public function set mouseChildren(value:Boolean):void
    {
        super.mouseChildren = value;
        _explicitMouseChildren = value;
    }

    override public function set mouseEnabled(value:Boolean):void
    {
        super.mouseEnabled = value;
        _explicitMouseEnabled = value;
    }

    override protected function getCurrentSkinState():String
    {
        if ((hovered || mouseCaptured) && !enabled)
            return \"overDisabled\";
        return super.getCurrentSkinState();
    }
}
}

<?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:fb=\"http://ns.adobe.com/flashbuilder/2009\" minWidth=\"21\" minHeight=\"21\" alpha.disabledState=\"0.5\">
    <fx:Metadata>[HostComponent(\"ButtonWithOverInDisabled\")]</fx:Metadata>
    <fx:Script fb:purpose=\"styling\">
        <![CDATA[         
            /* Define the skin elements that should not be colorized. 
            For button, the graphics are colorized but the label is not. */
            static private const exclusions:Array = [\"labelDisplay\"];

            /** 
             * @private
             */     
            override public function get colorizeExclusions():Array {return exclusions;}

            /**
             * @private
             */
            override protected function initializationComplete():void
            {
                useChromeColor = true;
                super.initializationComplete();
            }  

            /**
             *  @private
             */
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
            {
                var cr:Number = getStyle(\"cornerRadius\");

                if (cornerRadius != cr)
                {
                    cornerRadius = cr;
                    shadow.radiusX = cornerRadius;
                    fill.radiusX = cornerRadius;
                    lowlight.radiusX = cornerRadius;
                    highlight.radiusX = cornerRadius;
                    border.radiusX = cornerRadius;
                }

                if (highlightStroke) highlightStroke.radiusX = cornerRadius;
                if (hldownstroke1) hldownstroke1.radiusX = cornerRadius;
                if (hldownstroke2) hldownstroke2.radiusX = cornerRadius;

                super.updateDisplayList(unscaledWidth, unscaledHeight);
            }

            private var cornerRadius:Number = 2;
        ]]>        
    </fx:Script>

    <!-- states -->
    <s:states>
        <s:State name=\"up\" />
        <s:State name=\"over\" stateGroups=\"overState\" />
        <s:State name=\"down\" />
        <s:State name=\"disabled\" stateGroups=\"disabledState\" />
        <s:State name=\"overDisabled\" stateGroups=\"overState,disabledState\" />
    </s:states>

    <!-- layer 1: shadow -->
    <!--- @private -->
    <s:Rect id=\"shadow\" left=\"-1\" right=\"-1\" top=\"-1\" bottom=\"-1\" radiusX=\"2\">
        <s:fill>
            <s:LinearGradient rotation=\"90\">
                <s:GradientEntry color=\"0x000000\" 
                                 color.down=\"0xFFFFFF\"
                                 alpha=\"0.01\"
                                 alpha.down=\"0\" />
                <s:GradientEntry color=\"0x000000\" 
                                 color.down=\"0xFFFFFF\" 
                                 alpha=\"0.07\"
                                 alpha.down=\"0.5\" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>

    <!-- layer 2: fill -->
    <!--- @private -->
    <s:Rect id=\"fill\" left=\"1\" right=\"1\" top=\"1\" bottom=\"1\" radiusX=\"2\">
        <s:fill>
            <s:LinearGradient rotation=\"90\">
                <s:GradientEntry color=\"0xFFFFFF\" 
                                 color.overState=\"0xBBBDBD\" 
                                 color.down=\"0xAAAAAA\" 
                                 alpha=\"0.85\" />
                <s:GradientEntry color=\"0xD8D8D8\" 
                                 color.overState=\"0x9FA0A1\" 
                                 color.down=\"0x929496\" 
                                 alpha=\"0.85\" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>

    <!-- layer 3: fill lowlight -->
    <!--- @private -->
    <s:Rect id=\"lowlight\" left=\"1\" right=\"1\" top=\"1\" bottom=\"1\" radiusX=\"2\">
        <s:fill>
            <s:LinearGradient rotation=\"270\">
                <s:GradientEntry color=\"0x000000\" ratio=\"0.0\" alpha=\"0.0627\" />
                <s:GradientEntry color=\"0x000000\" ratio=\"0.48\" alpha=\"0.0099\" />
                <s:GradientEntry color=\"0x000000\" ratio=\"0.48001\" alpha=\"0\" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>

    <!-- layer 4: fill highlight -->
    <!--- @private -->
    <s:Rect id=\"highlight\" left=\"1\" right=\"1\" top=\"1\" bottom=\"1\" radiusX=\"2\">
        <s:fill>
            <s:LinearGradient rotation=\"90\">
                <s:GradientEntry color=\"0xFFFFFF\"
                                 ratio=\"0.0\"
                                 alpha=\"0.33\" 
                                 alpha.overState=\"0.22\" 
                                 alpha.down=\"0.12\"/>
                <s:GradientEntry color=\"0xFFFFFF\"
                                 ratio=\"0.48\"
                                 alpha=\"0.33\"
                                 alpha.overState=\"0.22\"
                                 alpha.down=\"0.12\" />
                <s:GradientEntry color=\"0xFFFFFF\"
                                 ratio=\"0.48001\"
                                 alpha=\"0\" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>

    <!-- layer 5: highlight stroke (all states except down) -->
    <!--- @private -->
    <s:Rect id=\"highlightStroke\" left=\"1\" right=\"1\" top=\"1\" bottom=\"1\" radiusX=\"2\" excludeFrom=\"down\">
        <s:stroke>
            <s:LinearGradientStroke rotation=\"90\" weight=\"1\">
                <s:GradientEntry color=\"0xFFFFFF\" alpha.overState=\"0.22\" />
                <s:GradientEntry color=\"0xD8D8D8\" alpha.overState=\"0.22\" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>

    <!-- layer 6: highlight stroke (down state only) -->
    <!--- @private -->
    <s:Rect id=\"hldownstroke1\" left=\"1\" right=\"1\" top=\"1\" bottom=\"1\" radiusX=\"2\" includeIn=\"down\">
        <s:stroke>
            <s:LinearGradientStroke rotation=\"90\" weight=\"1\">
                <s:GradientEntry color=\"0x000000\" alpha=\"0.25\" ratio=\"0.0\" />
                <s:GradientEntry color=\"0x000000\" alpha=\"0.25\" ratio=\"0.001\" />
                <s:GradientEntry color=\"0x000000\" alpha=\"0.07\" ratio=\"0.0011\" />
                <s:GradientEntry color=\"0x000000\" alpha=\"0.07\" ratio=\"0.965\" />
                <s:GradientEntry color=\"0x000000\" alpha=\"0.00\" ratio=\"0.9651\" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
    <!--- @private -->
    <s:Rect id=\"hldownstroke2\" left=\"2\" right=\"2\" top=\"2\" bottom=\"2\" radiusX=\"2\" includeIn=\"down\">
        <s:stroke>
            <s:LinearGradientStroke rotation=\"90\" weight=\"1\">
                <s:GradientEntry color=\"0x000000\" alpha=\"0.09\" ratio=\"0.0\" />
                <s:GradientEntry color=\"0x000000\" alpha=\"0.00\" ratio=\"0.0001\" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>

    <!-- layer 7: border - put on top of the fill so it doesn\'t disappear when scale is less than 1 -->
    <!--- @private -->
    <s:Rect id=\"border\" left=\"0\" right=\"0\" top=\"0\" bottom=\"0\" width=\"69\" height=\"20\" radiusX=\"2\">
        <s:stroke>
            <s:LinearGradientStroke rotation=\"90\" weight=\"1\">
                <s:GradientEntry color=\"0x000000\" 
                                 alpha=\"0.5625\"
                                 alpha.down=\"0.6375\" />
                <s:GradientEntry color=\"0x000000\" 
                                 alpha=\"0.75\" 
                                 alpha.down=\"0.85\" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>

    <!-- layer 8: text -->
    <!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay -->
    <s:Label id=\"labelDisplay\"
             textAlign=\"center\"
             verticalAlign=\"middle\"
             maxDisplayedLines=\"1\"
             horizontalCenter=\"0\" verticalCenter=\"1\"
             left=\"10\" right=\"10\" top=\"2\" bottom=\"2\">
    </s:Label>

</s:SparkSkin>