flex - 纵向和横向布置表单项

Question

我试图在flex中创建一个简单的表单(flash builder 4).我在里面放了一个表单容器和FormItems.表单项例如是标准的"客户"字段,例如First,Last,Address,City,State,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:GridItems有一个colSpan或rowSpan属性.此外,我使用空mx:FormItems而不是标签,因为您可以使用该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>

希望这可以帮助,

公园