如何更改flex中按钮的显示x y位置

Question

我想更改flex 4.5移动应用程序中spark按钮组件的字体位置。目前flex默认显示按钮中间的字体。但是我想将字体位置改为其他位置。我试着覆盖重写的方法layoutContents。但我得到两种字体。谁能帮我。

<s:Button label="Test &#13; TestGreenGo" skinClass="skins.RoundedButtonSkin"/> 

这里是我的RoundedButtonSkin类

package skins 
{ 
    import spark.skins.mobile.ButtonSkin; 

    public class RoundedButtonSkin extends ButtonSkin 
    { 

     private var colorized:Boolean = false; 

     public function RoundedButtonSkin() 
     { 
      super(); 

      measuredDefaultHeight = 44; 
      measuredDefaultWidth = 220; 
     } 

     override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void 
     { 
      super.layoutContents(unscaledWidth, unscaledHeight); 
      setElementPosition(upBorderSkin, 0, 0); 
      setElementSize(upBorderSkin, unscaledWidth, unscaledHeight); 
      setElementPosition(labelDisplay,0,0); 
      invalidateDisplayList(); 
      validateNow(); 
     } 
    } 
} 

Answer 1

我得到了解决。

需要补充labelDisplayShadow太

setElementPosition(labelDisplay,0,3); 
setElementPosition(labelDisplayShadow, labelDisplay.x, labelDisplay.y + 1); 

Answer 2

我想你应该尝试一个按钮的labelPlacement或textAlign性能。 您还可以添加top,left,right,bottom属性来控制文本位置。希望这会对你有用。

如果您在皮肤中添加<s:label />。那么您可以使用标签组件的maxDisplayedLine="2"属性将文本分为2行。

或设法使皮肤像这样

<s:SparkButtonSkin 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.disabled="0.5"> 

    <fx:Metadata> 
     <![CDATA[ 
     /** 
     * @copy spark.skins.spark.ApplicationSkin#hostComponent 
     */ 
     [HostComponent("spark.components.Button")] 
     ]]> 
    </fx:Metadata> 

    <fx:Script fb:purpose="styling"> 
     <![CDATA[   
      import spark.components.Group; 
      /* 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 = 5; 

     ]]>   
    </fx:Script> 

    <!-- states --> 
    <s:states> 
     <s:State name="up" /> 
     <s:State name="over" /> 
     <s:State name="down" /> 
     <s:State name="disabled" /> 
     <s:State name="selected" /> 
    </s:states> 

    <!-- layer 1: shadow --> 
    <!--- @private --> 
    <s:Rect id="shadow" left="0" right="0" top="0" bottom="0" radiusX="0"> 

    </s:Rect> 

    <!-- layer 2: fill --> 
    <!--- @private --> 
    <s:Rect id="fill" left="1" right="1" top="1" bottom="1" topLeftRadiusX="10" topLeftRadiusY="10" bottomLeftRadiusX="10" bottomLeftRadiusY="10" 
       topRightRadiusX="10" topRightRadiusY="10" bottomRightRadiusX="10" bottomRightRadiusY="10"> 
     <s:fill> 
       <s:LinearGradient rotation="90"> 
        <s:GradientEntry color="0xc9d8e2" color.selected="0xe7f1f8" color.down="0xe7f1f8" 
            color.disabled="0xb4b4b4" color.over="0xdbe9f3" 
            /> 

        <s:GradientEntry color="0xa1bbcd" color.over="0xdbe9f3" color.down="0xe2e9ed" 
            color.disabled="0xb4b4b4" color.selected="0xc8d7e1" 
            /> 
       </s:LinearGradient> 
     </s:fill> 


    </s:Rect> 

    <!-- layer 3: fill lowlight --> 
    <!--- @private --> 
    <s:Rect id="lowlight" left="1" right="1" top="1" bottom="1" topLeftRadiusX="10" topLeftRadiusY="10" bottomLeftRadiusX="10" bottomLeftRadiusY="10"> 

    </s:Rect> 

    <!-- layer 4: fill highlight --> 
    <!--- @private --> 
    <s:Rect id="highlight" left="1" right="1" top="1" bottom="1" topLeftRadiusX="10" topLeftRadiusY="10" bottomLeftRadiusX="10" bottomLeftRadiusY="10"> 

    </s:Rect> 

    <!-- layer 5: highlight stroke (all states except down) --> 
    <!--- @private --> 
    <s:Rect id="highlightStroke" left="1" right="1" top="1" bottom="1" excludeFrom="down" topLeftRadiusX="10" topLeftRadiusY="10" bottomLeftRadiusX="10" bottomLeftRadiusY="10" 
      topRightRadiusX="10" topRightRadiusY="10" bottomRightRadiusX="10" bottomRightRadiusY="10"> 
     <s:stroke> 
      <s:SolidColorStroke color="0xffffff" color.over="#40608f" alpha="0.3" weight="0" weight.over="1" alpha.over="0.7"> 
      </s:SolidColorStroke> 
      <!--<s:LinearGradientStroke rotation="90" weight="1"> 
      <s:GradientEntry color="0x57626f" alpha="0.22" alpha.over="0.22" /> 
      <s:GradientEntry color="0x586678" alpha.over="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" topLeftRadiusX="10" topLeftRadiusY="10" bottomLeftRadiusX="10" bottomLeftRadiusY="10" 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" topLeftRadiusX="10" topLeftRadiusY="10" bottomLeftRadiusX="10" bottomLeftRadiusY="10" includeIn="down"> 
     <s:stroke> 
      <s:SolidColorStroke color="0x2c2c2c" alpha=".56" weight="0.1"> 

      </s:SolidColorStroke> 
      <!--<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" topLeftRadiusX="10" topLeftRadiusY="10" bottomLeftRadiusX="10" bottomLeftRadiusY="10"> 

    </s:Rect> 

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

</s:SparkButtonSkin>