Question

我想在flex中编写一个简单的表单布局。如下所示：

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

最初，我尝试使用vbox和hbox为我的布局编码。如下所示

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

如果我开始在ItemRender或类似的东西中重复使用此代码，我会受到性能的影响。

我在某处读到过度使用HBox和VBox的性能很重，因为代码必须自己计算这些组件的确切位置。

考虑到这个答案，我转而使用Canvas。像这样：

<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有一个Form“组件”/布局管理器。我不知道你会得到的性能差异，但代码清洁度将得到改善（有助于维护 - 肯定会帮助你解决问题）。 HTH

Answer 3

我个人不会将ItemRenders用于表单，但您可能希望在ItemEditors中使用DataGrid来表示各个项目。如果您正在建立表单，请使用Form组件及其功能，如上所述。使用States交换表单元素，除非表单本身的性质是高度动态的，在这种情况下，您可能希望使用纯动作脚本与MXML方法。

最佳实践：如何在Flex中编写布局？

3 个答案: