flex - 垂直和水平布局表单项答案

【问题标题】：flex - laying out form items both vertically and horizontallyflex - 垂直和水平布局表单项
【发布时间】：2011-05-06 12:31:04
【问题描述】：

我正在尝试在 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 表单还是 Spark 表单？并向我们展示您用来布置物品的代码。
Szretter 不要在评论中发帖；编辑您的原始帖子并将您的代码放在那里。

标签： apache-flex forms layout user-interface

【解决方案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>

希望这会有所帮助，

科恩

【讨论】：

这几乎可以工作，至少 TextInput 字段在列的下方都是左对齐的，但字段标签都是左对齐的 - 我试图让它们都正确对齐。例如，如果我在同一列中有一个长字段标签和一个短标签，则短名称在 TextInput 字段之前的右侧会有很多空白。
查看我对这个问题的回答；这种方法非常复杂，只是为了让标签对齐。使用样式来更改表单项标签上的对齐方式对我来说似乎更容易。
@Scott：那么您只需使包含标签的 GridItem 右对齐，例如：

【解决方案2】：

答案是只使用 CSS。在 CSS 中创建一个 label style，将 textAlign 指定为“左”。然后采用该标签样式并将其应用于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 值。

【讨论】：

【解决方案3】：

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

【讨论】：