Flex：使用Group，HGroup和VGroup的另一個新手佈局問題

Question

如果您運行以下mxml代碼，則會看到MyLabel1比其他標籤（例如MyLabel2）和第二行上的其他項高。

如何更改代碼，使MyLabel1與MyLabel2等符合？

注意，任何改變都需要保持MyLabel2，MyLabel3組，並MyButton3到MyLabel1之間等距（左）和MyLabel4（右側），因爲它是現在。換句話說，第二行的這個中間組不在容器中居中，而是在左右兩側有相等的空間。

<?xml version="1.0" encoding="utf-8"?> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark" 
      xmlns:mx="library://ns.adobe.com/flex/mx" 
      minWidth="200" minHeight="300"> 

<s:VGroup top="10" left="20" right="20"> 

    <s:Group width="100%"> 

     <s:HGroup left="0" top="5" verticalAlign="baseline"> 
      <s:Label text="Some Text Here" /> 
     </s:HGroup> 

     <s:HGroup right="0" verticalAlign="baseline"> 
      <s:Button label="Button1" width="65"/> 
      <s:Button label="Button2" width="65"/> 
     </s:HGroup> 

    </s:Group> 

    <s:Spacer height="2"/> 

    <s:HGroup width="100%" > 

     <s:HGroup > 
      <s:Label text="MyLabel1"/> 
     </s:HGroup> 

     <s:Spacer width="100%"/> 

     <s:HGroup verticalAlign="baseline"> 
      <s:Label text="MyLabel2"/> 
      <s:Label text="MyLabel3"/> 
      <s:Button label="MyButton3" width="85"/>    
     </s:HGroup> 

     <s:Spacer width="100%"/> 

     <s:HGroup verticalAlign="baseline"> 
      <s:Label text="MyLabel4"/> 
      <s:TextInput id="myID" /> 
     </s:HGroup> 

    </s:HGroup> 

</s:VGroup> 

Answer 1

嘗試：

設置三個hgroup verticalAlign中等所以包含的項目定位在組件的高度的中間...

，那麼你需要指定三個hgroup的高度，因爲： - 第一個中只有一個標籤（具有一定高度） - 其他兩個中有一個按鈕和一個文本輸入，其高度比簡單的標籤（hgroup 1）

使用該組的自定義高度覆蓋高度由內部部件

<s:VGroup top="10" left="20" right="20"> 

    <s:Group width="100%"> 

     <s:HGroup left="0" top="5" verticalAlign="baseline"> 
      <s:Label text="Some Text Here" /> 
     </s:HGroup> 

     <s:HGroup right="0" verticalAlign="baseline"> 
      <s:Button label="Button1" width="65"/> 
      <s:Button label="Button2" width="65"/> 
     </s:HGroup> 

    </s:Group> 

    <s:Spacer height="2"/> 

    <s:HGroup width="100%" > 

     <s:HGroup verticalAlign="middle" height="25"> 
      <s:Label text="MyLabel1"/> 
     </s:HGroup> 

     <s:Spacer width="100%"/> 

     <s:HGroup verticalAlign="middle" height="25"> 
      <s:Label text="MyLabel2"/> 
      <s:Label text="MyLabel3"/> 
      <s:Button label="MyButton3" width="85"/>    
     </s:HGroup> 

     <s:Spacer width="100%"/> 

     <s:HGroup verticalAlign="middle" height="25"> 
      <s:Label text="MyLabel4"/> 
      <s:TextInput id="myID" /> 
     </s:HGroup> 

    </s:HGroup> 

</s:VGroup> 

Answer 2

設置只需添加verticalAlign =「基線」到最外HGroup。

<?xml version="1.0" encoding="utf-8"?> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:s="library://ns.adobe.com/flex/spark" 
       xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> 
    <fx:Declarations> 
     <!-- Place non-visual elements (e.g., services, value objects) here --> 
    </fx:Declarations> 

     <s:VGroup top="10" left="20" right="20"> 

      <s:Group width="100%"> 

       <s:HGroup left="0" top="5" verticalAlign="baseline"> 
        <s:Label text="Some Text Here" /> 
       </s:HGroup> 

       <s:HGroup right="0" verticalAlign="baseline"> 
        <s:Button label="Button1" width="65"/> 
        <s:Button label="Button2" width="65"/> 
       </s:HGroup> 

      </s:Group> 

      <s:Spacer height="2"/> 

      <s:HGroup width="100%" verticalAlign="baseline" > 

       <s:HGroup> 
        <s:Label text="MyLabel1"/> 
       </s:HGroup> 

       <s:Spacer width="100%"/> 

       <s:HGroup verticalAlign="baseline"> 
        <s:Label text="MyLabel2"/> 
        <s:Label text="MyLabel3"/> 
        <s:Button label="MyButton3" width="85"/>    
       </s:HGroup> 

       <s:Spacer width="100%"/> 

       <s:HGroup verticalAlign="baseline"> 
        <s:Label text="MyLabel4"/> 
        <s:TextInput id="myID" /> 
       </s:HGroup> 

      </s:HGroup> 

     </s:VGroup>  

</s:Application>