0

我想在 flex 中编写一个简单的表单布局。类似于以下内容：

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

最初，我尝试使用 vboxes 和 hboxes 对我的布局进行编码。像下面这样

<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 布局管理器可以减轻我的头痛？或者，如果有更好的方法来编码我的布局，一般来说。

4

3 回答 3

4

我会使用 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以供参考。

于 2009-05-22T20:20:42.293 回答
0

如果您真正使用“表单”布局，Flex 有一个表单“组件”/布局管理器。我不知道您将获得的性能差异，但代码清洁度会得到改善（有助于维护 - 肯定会帮助您解决问题）。高温高压

于 2009-05-22T20:18:15.047 回答
0

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

于 2009-05-22T22:39:25.603 回答