플렉스 스파크 스킨을 수직으로 센터링하려면 어떻게해야합니까?

Question

스파크 버튼에 두 개의 라벨을 붙일 수있는 스킨을 만들었지 만 버튼 텍스트는 세로로 가운데에 있지 않습니다. 내가 설정 한 설정에 관계없이 단추 맨 위에 유지됩니다. 그러나 피부의 아이콘은 세로로 가운데에 있습니다. 내가 만드는 시도했습니다

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

HGroup는 하드 높이 값을 사용

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

이 내가 그것을 전화 드렸습니다 코드는 다음과 같습니다

이

피부입니다 , 그리고 그것도 작동하지 않습니다.

미리 감사드립니다.

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"을 추가합니다. 이 그룹의 부모가 HGroup이므로 VGroup이있는 경우 BitmapImage 옆에 가로로 배치하고 중간에 세로로 정렬해야합니다.

Answer 2

'x', 'y', '왼쪽', '오른쪽', '위쪽', '아래', 'horizontalCenter', 'verticalCenter'등과 같은 절대적인 제약 조건을 사용할 수 없습니다. VerticalLayout (VGroup은 VerticalLayout가있는 단순한 그룹 임). 상대적으로 그리고 절대적으로 무언가를 배치 할 수 없기 때문에 이것은 의미가 있습니다. 이 경우 컨테이너의 레이아웃이 하위 구성 요소에 대한 제약 조건보다 우선합니다. 즉, 거기에있는 제약 조건을 단순히 제거 할 수 있습니다. 즉, 아무런 효과가 없습니다.

또한 'verticalAlign'은 컨테이너에 적용하는 스타일이지만 컨테이너에 하위를 배치하는 방법을 알려줍니다. 레이블에 할당 했으므로 "VGroup의 중간에 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>