フレックススパークのスキンを垂直にセンタリングするにはどうすればいいですか？

Question

スパークボタンに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="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> 

これは私がそれを呼んでいるコードです：私はのhgroupがハードコーディングさ高さの値を使用して作ってみた

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

それはうまくいきません。

ありがとうございます。

あなたは 'Y'、 'X' のような絶対的な制約を使用することはできません

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（絶対配置されたレイアウト）でのみ機能します。

Iはまた、ラベルを含まVGroupに100％の高さを除去します。これは、ラベルのグループが必要なだけの高さになることを意味します（今は実際にそれを中央に置くことができます）。

最後に、VGroupにverticalAlign="middle"を追加しました。このグループの親はHGroupなので、VGroupは、ある場合はBitmapImageの横に水平に配置し、中央に垂直に配置する必要があります。

Answer 2

、 '左'、 '右'、 '上'、 '下'、 'horizo​​ntalCenter'、 'verticalCenter'、...のような相対的なレイアウト内部VerticalLayout（VGroupはVerticalLayoutを持つ単なるグループです）。これは、あなたが相対的かつ絶対的に何かを置くことができないので理にかなっています。この場合、コンテナのレイアウトは、子コンポーネントに設定した制約よりも優先されます。つまり、そこにあるこれらの制約を単純に削除することができます。単に効果がありません。

また「verticalAlignは、」あなたは、コンテナに適用するスタイルですが、それはその子をレイアウトする方法をコンテナに指示します。これをラベルに割り当てたので、「VGroupの中央にLabelコンポーネントをレイアウトする」ではなく、「Labelコンポーネントの中央にある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>