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

我想在flex（flash builder 4）中创建一个简单的表单。我放置了一个表单容器和FormItems里面。表单项目是例如标准的“客户”字段，例如第一，最后，地址，城市，州，邮政编码。flex - 垂直和水平布局表单项目

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

不过，我想一些字段是水平的 - 例如，这样的事情：

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

此外，是否有任何好的书籍/网站/ etc中讨论用户界面设计/外形设计和类似Flex中，我可以浏览？

来源

2011-05-06 Scott Szretter

您是使用MX表单还是Spark表单？并向我们展示您用来放置项目的代码。 – JeffryHouser 2011-05-06 13:19:43

Szretter不要发表看法;编辑您的原始文章并将您的代码放在那里。 – JeffryHouser 2011-05-06 20:59:32

我发现的唯一方法就是使用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>

希望这有助于

公园

来源

2011-05-06 13:47:20

这几乎可以工作，至少TextInput字段都是向左对齐的列，但字段标签都是左对齐的 - 我试图让它们都对齐。例如，如果我在同一列中有一个长字段标签和一个短标签，短名称在TextInput字段之前会有很多空白。 – 2011-05-06 20:09:23

看到我对这个问题的回答;为了让标签排列起来，这种方法非常复杂。使用样式来更改表单项标签上的对齐对我来说似乎更容易。 – JeffryHouser 2011-05-06 21:21:15

@Scott：那么你只需使包含标签的GridItem右对齐，例如： – 2011-05-12 11:40:15

答案是只使用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值。

来源

2011-05-06 21:19:27 JeffryHouser

如果您想要列对齐，您应该避免使用多个HGroups，当您缩小浏览器窗口的大小时，它很容易中断，以致它无法一次显示所有内容。内容溢出逻辑将最有可能破坏对齐。使用mx：Grid作为最终解决方案，或使用s：Form来制作非常简单的案例。

来源

2013-03-25 10:43:37 jediz

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

回答

相关问题