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

发布时间：2020-12-15 01:46:38 所属栏目：百科来源：网络整理

导读：我试图在flex中创建一个简单的表单(flash builder 4).我在里面放了一个表单容器和FormItems.表单项例如是标准的“客户”字段,例如First,Last,Address,City,State,Zip. 默认情况下,它将字段垂直放置并使字段标签右对齐,这看起来不错. 但是,我希望某些字段是水

我试图在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我可以浏览？

解决方法

我发现实现这一目标的唯一方法是使用mx：Grid.
主要是因为mx：GridItems具有colSpan或rowSpan属性.此外,我使用空的mx：FormItems而不是标签,因为您可以使用必需的属性来显示所需字段的(*).

这是一个例子：

<?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>

希望这可以帮助,

公园

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!