apache-flex - flex - 垂直和水平布置表单项

Question

我正在尝试在 flex (flash builder 4) 中创建一个简单的表单。我在里面放了一个表单容器和 FormItems。例如，表单项是标准的“客户”字段，例如名字、姓氏、地址、城市、州、 zip 。

默认情况下，它垂直放置字段并使字段标签右对齐，这看起来不错。

但是，我希望某些字段是水平的 - 例如，如下所示:

  First __________   Last ___________
Address _____________________
   City ___________    St ___   Zip ____

我尝试将第一个/最后一个放在 HGroup 容器中，但这并不完全有效 - 我失去了标签的正确理由，看起来像这样:

First __________  Last ___________
Address _____________________
City ___________  St ___  Zip ____

这是我如何尝试使第一个/最后一个水平的示例，但是推荐不合理 - 但是城市和推荐一起合理合理:

<mx:Form x="0" y="307" width="100%"> 
 <s:HGroup> 
      <mx:FormItem label="First"> <s:TextInput/></mx:FormItem>
      <mx:FormItem label="Last"><s:TextInput/></mx:FormItem>
 </s:HGroup>
 <mx:FormItem label="Referral"><s:TextInput/></mx:FormItem><mx:FormItem label="City">
  <s:TextInput/>
 </mx:FormItem>
</mx:Form>

这几乎就像我需要一种具有 colSpan 能力的表格布局，或者？

这个自定义组件看起来很有前途，但至少在 fb4 中似乎不起作用 http://cookbooks.adobe.com/post_Multi_Column_Form_Layout-9644.html

另外，有没有什么好书/网站/等讨论用户界面设计/表单设计以及我可以浏览的Flex中的类似内容？

Answer 1

我发现实现这一目标的唯一方法是使用 mx:Grid .
主要是因为mx:GridItem s 有一个 colSpan或 rowSpan属性。此外，我使用空 mx:FormItem s 代替标签，因为您可以使用 required属性以显示 (*) 的必填字段。

下面是一个例子:

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
     xmlns:s="library://ns.adobe.com/flex/spark" 
     xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300">
  <mx:Form width="100%" height="100%">
    <mx:Grid width="100%" height="100%">
      <mx:GridRow>
        <mx:GridItem>
          <mx:FormItem label="First" required="true"/>
        </mx:GridItem>
        <mx:GridItem>
          <s:TextInput/>
        </mx:GridItem>
        <mx:GridItem>
          <mx:FormItem label="Last"/>
        </mx:GridItem>
        <mx:GridItem>
          <s:TextInput/>
        </mx:GridItem>
      </mx:GridRow>
      <mx:GridRow>
        <mx:GridItem width="100%" height="100%">
          <mx:FormItem label="Last"/>
        </mx:GridItem>
        <mx:GridItem width="100%" height="100%" colSpan="3">
          <s:TextInput width="100%"/>
        </mx:GridItem>
      </mx:GridRow>
    </mx:Grid>
  </mx:Form>
</s:Group>

希望这可以帮助，

公园