如何讓我的柔性火花皮膚垂直居中？

Question

我創建了一個皮膚，允許我在火花按鈕上有兩個標籤，但按鈕文本不會垂直居中。無論我給它什麼設置，它都會保持在按鈕的頂部。但是，皮膚中的圖標垂直居中。

這是皮膚：

<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="82" minHeight="82" 
     alpha.disabled="0.5" initialize="autoIconManagement=false"> 
<fx:Metadata>[HostComponent("com.XXXX.components.TwoLineButton")]</fx:Metadata> 

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

<s:Image source="{getStyle('upSkin')}" 
     source.over="{getStyle('overSkin')}" 
     source.down="{getStyle('downSkin')}" 
     source.disabled="{getStyle('disabledSkin')}" 
     width="100%" height="100%" 
     /> 

<s:HGroup verticalAlign="middle" height="100%" width="100%" 
      paddingLeft="{getStyle('paddingLeft')}" 
      paddingRight="{getStyle('paddingRight')}" 
      paddingTop="{getStyle('paddingTop')}" 
      paddingBottom="{getStyle('paddingBottom')}" 
      gap="{getStyle('horizontalGap')}" 
      verticalCenter="0"> 

    <s:BitmapImage id="iconDisplay" includeInLayout="{iconDisplay.source}"/> 

    <s:VGroup gap="{getStyle('verticalGap')}" height="100%" width="100%"> 
     <s:Label id="labelDisplay" 
       textAlign="center" 
       width="100%" 
       maxDisplayedLines="1" 
       horizontalCenter="0" verticalCenter="1" verticalAlign="middle" 
       left="10" right="10" top="2" bottom="2"> 
     </s:Label> 

     <s:Label id="bottomLabelDisplay" 
       textAlign="center" 
       width="100%" 
       maxDisplayedLines="1" 
       horizontalCenter="0" verticalCenter="1" verticalAlign="middle" 
       left="10" right="10" top="2" bottom="2"> 
     </s:Label> 
    </s:VGroup> 
</s:HGroup> 

這是我與調用它的代碼：

<components:TwoLineButton 
       width="308" 
       label="TopLabel" 
       bottomLabel="Bottom label" 
       click="handleButtonClick(event)" 
       /> 

我試圖使HGroup使用硬編碼的高度值，那也不管用。

在此先感謝。

Answer 1

在你的皮膚應該是這個樣子的HGroup：

<s:HGroup verticalAlign="middle" height="100%" width="100%" 
      paddingLeft="{getStyle('paddingLeft')}" 
      paddingRight="{getStyle('paddingRight')}" 
      paddingTop="{getStyle('paddingTop')}" 
      paddingBottom="{getStyle('paddingBottom')}" 
      gap="{getStyle('horizontalGap')}" > 

    <s:BitmapImage id="iconDisplay" includeInLayout="{iconDisplay.source}"/> 

    <s:VGroup gap="{getStyle('verticalGap')}" width="100%" verticalAlign="middle" > 
     <!-- not sure if you need 100% width here --> 
     <s:Label id="labelDisplay" 
       textAlign="center" 
       width="100%" 
       maxDisplayedLines="1"> 
     </s:Label> 

     <s:Label id="bottomLabelDisplay" 
       textAlign="center" 
       width="100%" 
       maxDisplayedLines="1"> 
     </s:Label> 
    </s:VGroup> 
</s:HGroup> 

您的標籤位於VGroup，因此verticalCenter,horizontalCenter,top,left等屬性不適用。這些屬性僅適用於BasicLayout（絕對定位的佈局）。

我還刪除了包含標籤的VGroup上的100％高度。這意味着這組標籤將只有必要的高度（所以現在我們可以將其居中）。

最後，將verticalAlign="middle"添加到VGroup。由於此組的父級爲HGroup，因此VGroup應該水平放置在BitmapImage旁邊（如果存在），並在中間垂直對齊。

Answer 2

您不能在像x，y，left，right，top，bottom，horizo​​ntalCenter，verticalCenter這樣的相對佈局中使用絕對約束VerticalLayout（VGroup只是一個具有VerticalLayout的組）。這是有道理的，因爲你無法相對和絕對地定位某些東西。在這種情況下，容器的佈局優先於放置在子組件上的任何約束。這意味着你可以簡單地刪除你在那裏的任何約束：它們根本沒有任何作用。

此外'verticalAlign'是您應用於容器的樣式，但它告訴容器如何佈置其子項。您已將它分配給標籤，因此您要說「在Label組件中間的Label中放置文本組件」，而不是「在VGroup中間佈置Label組件」。所以這個也是多餘的。

類似下面應該解決您的問題：

<s:VGroup height="200"> 
    <s:Label text="A" height="50%" verticalAlign="middle" /> 
    <s:Label text="B" height="50%" verticalAlign="middle" /> 
</s:VGroup> 

，或者如果你想在Vgroup的中間組合在一起，既標籤（這不是清楚你想要的都之一的描述）：

<s:VGroup height="200" verticalAlign="middle"> 
    <s:Label text="A" /> 
    <s:Label text="B" /> 
</s:VGroup>