最佳實踐：如何在Flex中編寫佈局代碼？

Question

我想在flex中編寫簡單的表單佈局。像下面這樣：

[label] [text field] 
[label] [text field] 

最初，我已經嘗試使用vboxes和hboxes爲我的佈局編碼。像下面

<hbox> 
    <vbox> 
     <label /> 
     <textfield /> 
    </vbox> 
    <vbox> 
     <label /> 
     <textfield /> 
    </vbox> 
</hbox> 

我得到的性能燒了，如果我開始在ItemRender或類似的東西重用此代碼。

我讀過一些地方，過度使用HBox和VBox性能很重，因爲代碼必須自行計算這些組件的確切位置。

考慮到這個答案，我切換到使用畫布。類似這樣的：

<canvas> 
    <label x="0" y="0" /> 
    <text field x="30" y="0" /> 

    <label x="0" y="15" /> 
    <textfield x="30" y="15" /> 
</canvas> 

當你想隱藏和顯示某些文本字段時，這開始變成它自己的噩夢。或者如果你有一個textArea並想使用自動換行。我已經開始根據其他元素的位置動態地將對象放置在畫布上，但它正在成爲維護的噩夢。

問：

所以，我想知道是否有Flex的任何佈局管理器，以減輕我，我的頭痛？或者，如果只是更好的方式編碼我的佈局，一般情況下。

Answer 1

我會使用Form，FormItem和FormHeading標籤來佈局表單。類似這樣的：

 <mx:Form width="100%" height="100%"> 
     <mx:FormHeading label="Enter values into the form."/> 

     <mx:FormItem label="First name"> 
      <mx:TextInput id="fname" width="200"/> 
     </mx:FormItem> 

     <mx:FormItem label="Date of birth (mm/dd/yyyy)"> 
      <mx:TextInput id="dob" width="200"/> 
     </mx:FormItem> 

     <mx:FormItem label="E-mail address"> 
      <mx:TextInput id="email" width="200"/> 
     </mx:FormItem> 

     <mx:FormItem label="Age"> 
      <mx:TextInput id="age" width="200"/> 
     </mx:FormItem> 

     <mx:FormItem label="SSN"> 
      <mx:TextInput id="ssn" width="200"/> 
     </mx:FormItem> 

     <mx:FormItem label="Zip"> 
      <mx:TextInput id="zip" width="200"/> 
     </mx:FormItem> 

     <mx:FormItem label="Phone"> 
      <mx:TextInput id="phone" width="200"/> 
     </mx:FormItem> 
    </mx:Form> 

退房：http://livedocs.adobe.com/flex/3/langref/mx/containers/Form.html#includeExamplesSummary僅供參考。

Answer 2

如果你真的使用「表單」佈局，Flex有一個表單「組件」/佈局管理器。我不知道你會得到的性能差異，但代碼清潔度會得到提高（有助於維護 - 將明確幫助你解決問題）。 HTH

Answer 3

就個人而言，我不會使用ItemRenders表單，但您可能希望在個別項目的DataGrid中使用ItemEditors。如上所述，如果要製作表單，請使用帶有其功能的Form組件。使用States來替換表單元素，除非表單本身的屬性是高度動態的，在這種情況下，您可能想要使用純粹的動作對比MXML方法。