Как сделать так, чтобы моя гибкая искровая кожа была отцентрирована вертикально? - PullRequest
Новая
       52

Как сделать так, чтобы моя гибкая искровая кожа была отцентрирована вертикально?

2 голосов
/ 02 апреля 2012

Я создал скин, который позволяет мне иметь две метки на кнопке зажигания, но текст кнопки не будет центрироваться вертикально.Он остается в верхней части кнопки независимо от того, какие настройки я ему даю.Значок в скине, однако, центрируется по вертикали.

Это скин: 

<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 использовать жестко заданное значение высоты, и это тоже не работает.

Заранее спасибо.

Ответы [ 2 ]

2 голосов
/ 02 апреля 2012

Вы не можете использовать абсолютные ограничения, такие как '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>
1 голос
/ 02 апреля 2012

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, если он присутствует, и вертикально выровнена по центру.

...