禁用狀態時向Spark按鈕添加翻轉狀態

Question

我需要向Spark按鈕的禁用狀態添加翻轉效果。這樣，用戶可以翻轉按鈕並知道按鈕被禁用的原因。我想我將不得不重寫ButtonBase的getCurrentSkinState。無論如何測試鼠標光標是否在禁用的按鈕上？

謝謝。

Answer 1

嘗試使用以下命令：

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(); 
    } 
} 
} 

Spark外觀可能如下所示：

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

希望這有助於！ :)