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:GridItem具有colSpan或rowSpan属性。此外，我使用空mx:FormItem代替标签，因为您可以使用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>

希望这有帮助，

柯恩

Answer 2

答案是使用CSS。在CSS中创建一个label style，指定textAlign为'left'。然后采用该标签样式并将其应用于labelStyleName property on the formItem。

这是一个完整的应用程序，演示了修复：

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";

        .labelStyleName {
            textAlign:left;
        }
    </fx:Style>

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

</s:Application>

如果您想要更具体的输入项目排队;您可能需要指定labelWidth值。

Answer 3

如果希望列对齐，则应避免使用多个HGroup，当您缩小浏览器窗口的大小时，它可能很容易中断，因此无法一次显示所有内容。内容溢出逻辑将最有可能打破对齐。使用mx：Grid作为最终解决方案或s：表单用于非常简单的情况。

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

3 个答案: