Flex移动按钮上的缩放图标？

Question

我有一个图标和移动皮肤的ToggleButton。

<s:ToggleButton icon="@Embed('/assets/myIcon.png')" skinClass="skins.mobile.ToggleButtonSkin "/> 

这是皮肤。

package skins.mobile 
{ 
    import flash.display.DisplayObject; 
    import flash.display.Sprite; 

    import mx.core.DPIClassification; 
    import mx.core.mx_internal; 
    import mx.events.FlexEvent; 

    import spark.components.supportClasses.StyleableTextField; 
    import spark.skins.mobile.supportClasses.ButtonSkinBase; 

    import assets.themes.joy.embed.fxg.MobileButtonDownSkin; 
    import assets.themes.joy.embed.fxg.MobileButtonUpSkin; 
    import assets.themes.joy.embed.fxg.MobileSelectedButtonUpSkin; 

    use namespace mx_internal; 

    public class ToggleButtonSkin extends ButtonSkinBase 
    {  
     public function ToggleButtonSkin() 
     { 
      super(); 

      // replace FXG asset classes 
      upBorderSkin = MobileButtonUpSkin; 
      downBorderSkin = MobileButtonDownSkin; 
      upAndSelectedBorderSkin = MobileSelectedButtonUpSkin; 
      downAndSelectedBorderSkin = MobileSelectedButtonUpSkin; 

      //default width/height 
      measuredDefaultHeight = 66; 
      measuredDefaultWidth = 208; 

      layoutGap = 7; 
     } 

     //-------------------------------------------------------------------------- 
     // 
     // Variables 
     // 
     //--------------------------------------------------------------------------   
     private var _border:DisplayObject; 

     private var changeFXGSkin:Boolean = false; 

     private var borderClass:Class; 

     private var _downStateFlag:Boolean; 

     /** 
     * Read-only button border graphic. Use getBorderClassForCurrentState() 
     * to specify a graphic per-state. 
     * 
     * @see #getBorderClassForCurrentState() 
     */ 
     protected function get border():DisplayObject 
     { 
      return _border; 
     } 

     //-------------------------------------------------------------------------- 
     // 
     // Properties 
     // 
     //-------------------------------------------------------------------------- 

     /** 
     * Class to use for the border in the up state. 
     */ 
     protected var upBorderSkin:Class; 

     /** 
     * Class to use for the border in the down state. 
     */ 
     protected var downBorderSkin:Class; 

     /** 
     * Class to use for the border when selected in the up state. 
     */ 
     protected var upAndSelectedBorderSkin:Class; 

     /** 
     * Class to use for the border when selected in the down state. 
     */ 
     protected var downAndSelectedBorderSkin:Class; 

     //-------------------------------------------------------------------------- 
     // 
     // Overridden methods 
     // 
     //-------------------------------------------------------------------------- 

     /** 
     * @private 
     */ 
     override protected function commitCurrentState():void 
     { 
      super.commitCurrentState(); 

      borderClass = getBorderClassForCurrentState(); 

      if (!(_border is borderClass)) 
       changeFXGSkin = true; 

      var icon:DisplayObject = getIconDisplay(); 

      //reduce fontSize for down state 
      if(currentState == "down") { 
       icon.scaleX = icon.scaleY = .5; 
       _downStateFlag = true; 
      } else { 
       if(_downStateFlag) { 
        icon.scaleX = icon.scaleY = 1; 
        _downStateFlag = false; 
       } 
      } 

      // update borderClass and background 
      invalidateDisplayList(); 
     } 

     /** 
     * @private 
     */ 
     override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void 
     { 
      super.layoutContents(unscaledWidth, unscaledHeight); 

      // size the FXG background 
      if (changeFXGSkin) 
      { 
       changeFXGSkin = false; 

       if (_border) 
       { 
        removeChild(_border); 
        _border = null; 
       } 

       if (borderClass) 
       { 
        _border = new borderClass(); 
        addChildAt(_border, 0); 
       } 
      } 

      layoutBorder(unscaledWidth, unscaledHeight); 
     } 

     /** 
     * Position the background of the skin. Override this function to re-position the background. 
     * 
     * @langversion 3.0 
     * @playerversion Flash 10 
     * @playerversion AIR 2.5 
     * @productversion Flex 4.5 
     */ 
     mx_internal function layoutBorder(unscaledWidth:Number, unscaledHeight:Number):void 
     { 
      setElementSize(border, unscaledWidth, unscaledHeight); 
      setElementPosition(border, 0, 0); 
     }  

     /** 
     * Returns the borderClass to use based on the currentState. 
     */ 
     protected function getBorderClassForCurrentState():Class 
     { 
      var cla:Class; 
      switch(currentState) 
      { 
       case "down": 
        cla = downBorderSkin; 
        break; 
       case "up": 
        cla = upBorderSkin; 
        break; 
       case "downAndSelected": 
        cla = downAndSelectedBorderSkin; 
        break; 
       case "upAndSelected": 
        cla = upAndSelectedBorderSkin; 
        break; 
      } 
      return cla; 
     }  
    } 
} 

该图标应该在“向下”状态下缩小。但是，似乎在移动按钮皮肤中，没有iconDisplay属性，所以我无法访问该图标。

如果你看看commitCurrentState()函数，我试着用getIconDisplay()来代替。但这不起作用。

有谁知道是否有方法缩放图标？

Answer 1

想通了。缩放需要发生在layoutContents()而不是commitCurrentState()。

这两个功能应该是这样的：

 /** 
     * @private 
     */ 
     override protected function commitCurrentState():void 
     { 
      super.commitCurrentState(); 

      borderClass = getBorderClassForCurrentState(); 

      if (!(_border is borderClass)) 
       changeFXGSkin = true; 

      // update borderClass and background 
      invalidateDisplayList(); 
     } 

     /** 
     * @private 
     */ 
     override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void 
     { 
      super.layoutContents(unscaledWidth, unscaledHeight); 

      // size the FXG background 
      if (changeFXGSkin) 
      { 
       changeFXGSkin = false; 

       if (_border) 
       { 
        removeChild(_border); 
        _border = null; 
       } 

       if (borderClass) 
       { 
        _border = new borderClass(); 
        addChildAt(_border, 0); 
       } 
      } 

      layoutBorder(unscaledWidth, unscaledHeight); 

      //reduce icon size in "down" state 
      if(currentState == "down") {      
       var iconDisplay:DisplayObject = getIconDisplay(); 
       if(iconDisplay) { 
        setElementSize(iconDisplay, iconDisplay.width *.85, iconDisplay.height *.85); 
        setElementPosition(iconDisplay, (unscaledWidth - iconDisplay.width)/2, (unscaledHeight - iconDisplay.height)/2); 
       } 
      } 
     }