最佳实践：如何在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方法。