Flex移动按钮在ActionScript中的皮肤 - 多行标签Display

Question

我正在致力于Flex mobil e应用程序，并且一直在优化其在移动设备上的性能。我已阅读皮肤必须写在ActionScript，所以我试图创建我的AS ButtonSkin。

public class mButtonSkin extends ButtonSkin 
{ 
    private static var colorMatrix:Matrix = new Matrix(); 

    protected var radiusX:Number = 12; 
    protected var mAngle:Number = 30; 
    protected var labelWidth:Number; 
    protected var labelHeight:Number; 
    protected var paddingLeft:Number = 12; 
    protected var paddingRight:Number = 12; 
    protected var paddingTop:Number = 2; 
    protected var paddingBottom:Number = 2; 



    public function mButtonSkin() { 
     super(); 
    } 


    override protected function drawBackground(unscaledWidth:Number,unscaledHeight:Number) : void { 
     colorMatrix.createGradientBox(width,height,mAngle); 
     if (currentState == "up") { 
      graphics.beginGradientFill(GradientType.LINEAR, 
       [hostComponent.getStyle("fill3"),hostComponent.getStyle("fill1")], [1,1], [0,255], colorMatrix); 
     } else { 
      graphics.beginFill(hostComponent.getStyle("fill4")); 
     } 

     graphics.lineStyle(0.5,hostComponent.getStyle("borderColor"),0.5); 
     graphics.drawRoundRect(0,0,hostComponent.width,hostComponent.height,12); 
     graphics.endFill(); 
    } 


    override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number) : void { 
     labelDisplay.wordWrap = true; 
     labelDisplay.multiline = true; 

     labelDisplay.commitStyles(); 

     labelWidth = width - paddingLeft - paddingRight; 
     labelHeight = height - paddingTop - paddingBottom; 

     var x:Number = width/2 - labelWidth/2; 
     var y:Number = height/2 - getElementPreferredHeight(labelDisplay)/2; 

     setElementSize(labelDisplay,labelWidth,labelHeight); 
     setElementPosition(labelDisplay,x,y); 
    } 


    override protected function labelDisplay_valueCommitHandler(event:FlexEvent) : void { 
     labelDisplayShadow.text = ""; 
    } 
} 

应用这种皮肤在我的按钮：

按钮labelDisplay的有错的比对（verticalAlignment必须是中间）。

点击按钮后：

我的按钮的labelDisplay现在是垂直对齐到中间。

我错过了什么吗？我做错了什么？

Answer 1

在layoutContents功能，labelDisplay元件定位之前，我首先检查它是否是numLines属性大于1。这里是我的更新功能：

override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number) : void { 
     labelDisplay.wordWrap = true; 
     labelDisplay.multiline = true; 

     labelWidth = width - paddingLeft - paddingRight; 
     labelHeight = height - paddingTop - paddingBottom; 

     var x:Number = width * .5 - labelWidth * .5; 
     var y:Number = height * .5 - getElementPreferredHeight(labelDisplay) * .5; 

     setElementSize(labelDisplay,labelWidth,labelHeight); 

     if (labelDisplay.numLines == 1) 
      setElementPosition(labelDisplay,x,y); 
     else 
      setElementPosition(labelDisplay, x, labelDisplay.getLayoutBoundsY()); 
    } 

这种解决方案可能不会对其他开发者有用的在那里但它解决了我的问题。