我正在尝试在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中我可以浏览的类似内容?
答案 0 :(得分:7)
我发现实现这一目标的唯一方法是使用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>
希望这有帮助,
柯恩
答案 1 :(得分:1)
答案是使用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值。
答案 2 :(得分:0)
如果希望列对齐,则应避免使用多个HGroup,当您缩小浏览器窗口的大小时,它可能很容易中断,因此无法一次显示所有内容。内容溢出逻辑将最有可能打破对齐。使用mx:Grid作为最终解决方案或s:表单用于非常简单的情况。