Wie erreiche ich, dass meine Flex Funke Haut vertikal zentriert wird?

Question

Ich habe eine Skin erstellt, die es mir erlaubt, zwei Etiketten auf einem Spark-Button zu haben, aber der Button-Text wird nicht vertikal zentriert. Es bleibt oben auf der Schaltfläche, egal welche Einstellungen ich gebe. Das Symbol in der Haut zentriert sich jedoch vertikal.

Dies ist die Haut:

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

Dies ist der Code, den ich es mit Aufruf bin:

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

Ich habe versucht, so dass die HGroup einen hartkodierte Höhenwert verwenden und das funktioniert auch nicht.

Vielen Dank im Voraus.

Answer 1

The HGroup in Ihrer Haut sollte wie folgt aussehen:

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

Ihre Etiketten sind in einem VGroup so Attribute wie verticalCenter, horizontalCenter, top, left, usw. nicht gelten. Diese Attribute funktionieren nur in BasicLayout (absolut positionierte Layouts).

Ich entfernte auch die 100% Höhe auf der VGroup, die die Etiketten enthielt. Dies bedeutet, dass Etikettengruppen nur so groß wie nötig sind (so dass wir sie jetzt zentrieren können).

Schließlich hinzugefügt verticalAlign="middle" zu VGroup. Da das übergeordnete Element dieser Gruppe ein HGroup ist, sollte die VGroup horizontal neben dem BitmapImage positioniert werden, falls vorhanden, und vertikal in der Mitte ausgerichtet sein.

Answer 2

Sie können keine absoluten Einschränkungen wie 'x', 'y', 'links', 'rechts', 'oben', 'unten', 'horizontalCenter', 'vertikalCenter', ... innerhalb eines relativen Layouts verwenden VerticalLayout (VGroup ist nur eine Gruppe mit einem VerticalLayout). Dies ist sinnvoll, da Sie sowohl relativ als auch absolut nichts positionieren können. In diesem Fall hat das Layout des Containers Vorrang vor den Beschränkungen, die Sie für die untergeordnete Komponente festgelegt haben. Dies bedeutet, dass Sie alle diese Einschränkungen, die Sie dort haben, einfach entfernen können: Sie haben einfach keine Wirkung.

Auch 'verticalAlign' ist ein Stil, den Sie auf einen Container anwenden, aber er teilt dem Container mit, wie er seine untergeordneten Elemente anordnet. Sie haben es den Labels zugewiesen, also sagen Sie "legen Sie die Textkomponente innerhalb des Labels in der Mitte der Label-Komponente ab" und nicht "legen Sie die Label-Komponente in der Mitte der VGroup an". Also ist dieser auch überflüssig.

etwas wie das folgende sollte Ihr Problem beheben:

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

oder wenn Sie beide Labels wollen zusammen gruppiert in der Mitte des VGroup (es ist nicht aus der Beschreibung, die einer der beiden Sie wollen):

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