Flex 3.5 - 表單對齊

Question

我做了這個表單，但是您可以看到第一列字段沒有正確對齊。 我試圖用圖形編輯器來做，但它不會這樣做。

下面是代碼：

<mx:TitleWindow 
    id="SearchTitleWindow" 
    title="Recherche" 
    showCloseButton="true" 
    horizontalAlign="right" 
    width="627.8656" 
    height="201" x="267" y="275"> 

    <mx:VBox width="100%" height="116"> 
     <mx:HBox> 
      <mx:FormItem label="Numéro voie : " width="140.71146" height="21.007908"> 
       <mx:TextInput id="numVoie" width="41.916996" height="21.007908"/> 
      </mx:FormItem> 
      <mx:FormItem label="Nature voie : " > 
       <mx:TextInput id="natVoie" width="100"/> 
      </mx:FormItem> 
      <mx:FormItem label="Nom voie* : " > 
       <mx:TextInput id="nomVoie" width="163.91306" height="21.007908"/> 
      </mx:FormItem> 
     </mx:HBox> 
     <mx:HBox width="597.33203" height="20.98814"> 
      <mx:FormItem label="Complement : " width="599.3083" height="21.007908"> 
       <mx:TextInput id="Complement" width="497.92493" height="21.007908"/> 
      </mx:FormItem> 
     </mx:HBox> 
     <mx:HBox> 
      <mx:FormItem label="Code postal* : " > 
       <mx:TextInput id="codePostal" width="101.581024" height="21.996048"/> 
      </mx:FormItem> 
      <mx:FormItem label="Commune* : " > 
       <mx:TextInput id="Commune" width="294.13046" height="21.007908"/> 
      </mx:FormItem> 
     </mx:HBox> 
     <mx:HBox> 
      <mx:FormItem label="Coordonnées : " > 
        <mx:TextInput id="coordOne" width="169.01187" height="21.007908"/> 
      </mx:FormItem> 
      <mx:FormItem label=" " > 
       <mx:TextInput id="coordTwo" width="169.40714" height="21.007908"/> 
      </mx:FormItem> 
      <mx:Button id="geocoderTourneeSearchBtn" 
         styleName="button" 
         width="120" 
         label="Géocoder"/> 
     </mx:HBox> 
    </mx:VBox> 

    <mx:ControlBar horizontalAlign="right" height="45"> 
     <mx:Button id="cancelTourneeSearchBtn" 
        styleName="button" 
        width="200" 
        label="Annuler"/> 
     <mx:Button id="searchTourneeSearchBtn" 
        styleName="button" 
        width="200" 
        label="Rechercher"/> 
    </mx:ControlBar> 
</mx:TitleWindow> 

怪異的高度和寬度參數已經由圖形編輯器中設置。 任何想法如何做？

謝謝。

PS：我只可以使用的Flex SDK 3.5

Answer 1

其實，這個問題的發生是由於不同的標籤寬度。我的項目也面臨同樣的問題。我通過設置每個formItem標籤的等寬來解決這個問題。你應該設置每個formItem標籤的寬度和最長標籤的寬度。

在您的表格中，標籤「Coordonnées」的寬度最大。因此，您將每個formItem標籤的寬度設置爲「Coordonnées」標籤的寬度。

Answer 2

這裏的問題是，你沒有在你提供的代碼中的任何地方使用Form容器。

A Flex Form與FormItems一起使用來計算出最大標籤的寬度。因此，它將能夠調整每個FormItem的位置（或者可能的尺寸），以便標籤可以右對齊。

您已經有了一個複雜的表單，其中有些行上有多個表單項。我不清楚這將如何工作W /尊重獲得適當的表格佈局。但我認爲開發人員也可能預料到了這一點。

下面是一個表格應MXML指定：

<mx:Form> 
    <mx:FormItem label="label 1"> 
     <mx:TextInput id="textInput1" /> 
    </mx:FormItem> 
    <mx:FormItem label="label 2"> 
     <mx:TextInput id="textInput2" /> 
    </mx:FormItem> 
</mx:Form> 

我不完全相信你應該如何在同一行上處理多個FormItems。我會嘗試使用包含2個或更多FormItem控件的HBox。但是，我不會在此上花費很多時間。

您可能會發現，使用帶有行和列的基於約束的佈局可以更容易地實現。 Canvas容器支持佈局約束，如：頂部，底部，左側，右側。它還允許您使用constrainColumns和constraintRows陣列設置您自己的網格。