Как заставить мою искровую искровую кожу центрировать по вертикали?

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

The 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 (абсолютно позиционированные макеты).

Я также удалил высоту 100% на VGroup, в которой были этикетки. Это означает, что группа лейблов будет только настолько высока, насколько это необходимо (так что теперь мы можем фактически сосредоточить ее).

И наконец, добавлено verticalAlign="middle" к VGroup. Поскольку родителем этой группы является HGroup, VGroup следует располагать горизонтально рядом с BitmapImage, если он имеется, и вертикально выровнен по центру.

Answer 2

Вы не можете использовать абсолютные ограничения, такие как «x», «y», «left», «right», «top», «bottom», «horizontalCenter», «verticalCenter», ... внутри относительного макета, например VerticalLayout (VGroup - это просто группа с VerticalLayout). Это имеет смысл, поскольку вы не можете позиционировать что-то как относительно, так и абсолютно. В этом случае расположение контейнера имеет приоритет над любыми ограничениями, которые вы ставите на дочерний компонент. Это означает, что вы можете просто удалить любые из этих ограничений, которые у вас есть: они просто не имеют никакого эффекта.

Также «verticalAlign» - это стиль, который вы применяете к контейнеру, но он указывает контейнеру, как его макеты. Вы назначили его на ярлыки, поэтому вы говорите «выложите текстовый компонент внутри метки в середине компонента« Ярлык », а не« макет компонента «Ярлык» в середине VGroup ». Таким образом, это тоже избыточно.

Что-то вроде следующего должно устранить проблему:

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