【译】使用ConstraintLayout创建复杂的表单布局

2012-03-31 [1572] technology flex translate

【译】使用ConstraintLayout创建复杂的表单布局

原文地址：Flex - Complex Form layouts with ContraintLayout

Form容器默认使用FormLayout布局排列子表单项。FormLayout继承自VerticalLayout，它对FormItem容器进行纵向排列。如果你想实现纵向的排列表单，这当然好，但是很多时候往往不是这样。看看下面的例子。

请使用下面的链接升级 Flash Player 到最新版本：

安装最新的Flash Player插件

通常情况下，我看到开发者在实现一个表单布局的时候，会放弃FormLayout布局而是使用一堆嵌套的HGroup和VGroup，尽管这种做法有点傻X，效果也不太理想。

还记得Flex 3中的 ConstraintRows 和 ConstraintColumns 么？它们在Flex 4中换了个 ConstraintLayout 的马甲又出现了，这个 Layout 可以用在 Form 中。我发现许多 Flex 开发者不知道这件事，这不奇怪，因为它们在官方文档中的说明少得可怜。而且，如果使用 Google 搜索它，你只能得到 MX 组件的相关内容。

上面的表单在 Spark Form 容器中使用 ConstraintLayout 替代了 FormLayout ，这个 Layout 为 FormItem 容器提供了类似于网格布局的功能，同时实现跨行、跨列。

 1<?xml version="1.0" encoding="utf-8"?>
 2<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
 3               xmlns:s="library://ns.adobe.com/flex/spark"
 4               xmlns:mx="library://ns.adobe.com/flex/mx"
 5               viewSourceURL="srcview/index.html">
 6    <s:layout>
 7        <s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>
 8    </s:layout>
 9    
10    <fx:Declarations>
11        <!-- Place non-visual elements (e.g., services, value objects) here -->
12    </fx:Declarations>
13    
14    <s:Form>
15        <s:layout>
16            <s:ConstraintLayout>
17                <s:constraintRows>
18                    <s:ConstraintRow id="row1" />
19                    <s:ConstraintRow id="row2"/>
20                    <s:ConstraintRow id="row3"/>
21                </s:constraintRows>
22                <s:constraintColumns>
23                    <s:ConstraintColumn id="col1" width="100"/>
24                    <s:ConstraintColumn id="col2" width="100"/>
25                    <s:ConstraintColumn id="col3" width="100"/>
26                </s:constraintColumns>
27            </s:ConstraintLayout>
28        </s:layout>
29        
30        <s:FormItem label="First Name"
31                    left="col1:3" right="col2:53" top="row1:0" bottom="row1:0"
32                    skinClass="com.shinynet.shinylib.skins.CondensedStackedFormItemSkin">
33            <s:TextInput width="100%"/>
34        </s:FormItem>
35        <s:FormItem label="Last Name"
36                    left="col2:53" right="col3:3" top="row1:0" bottom="row1:0"
37                    skinClass="com.shinynet.shinylib.skins.CondensedStackedFormItemSkin">
38            <s:TextInput width="100%"/>
39        </s:FormItem>
40        
41        <s:FormItem label="Address"
42                    left="col1:3" right="col3:3" top="row2:0" bottom="row2:0"
43                    skinClass="com.shinynet.shinylib.skins.CondensedStackedFormItemSkin">
44            <s:TextInput width="100%"/>
45        </s:FormItem>
46        
47        <s:FormItem label="City"
48                    left="col1:3" right="col1:3" top="row3:0" bottom="row3:0"
49                    skinClass="com.shinynet.shinylib.skins.CondensedStackedFormItemSkin">
50            <s:TextInput width="100%"/>
51        </s:FormItem>
52        <s:FormItem label="State"
53                    left="col2:3" right="col2:3" top="row3:0" bottom="row3:0"
54                    skinClass="com.shinynet.shinylib.skins.CondensedStackedFormItemSkin">
55            <s:TextInput width="100%"/>
56        </s:FormItem>
57        <s:FormItem label="Zip"
58                    left="col3:3" right="col3:3" top="row3:0" bottom="row3:0"
59                    skinClass="com.shinynet.shinylib.skins.CondensedStackedFormItemSkin">
60            <s:TextInput width="100%"/>
61        </s:FormItem>
62    </s:Form>
63    
64</s:Application>

下面的内容和本文主题没什么关系，但我还是要说一下。我使用了自定义的 FormItem 皮肤 CondensedStackedFormItemSkin ，这个皮肤移除了 sequenceLabelDisplay 和 helpContentGroup 这两个外观部件，因为它们是不必要的，而且占用了太多空间。你可以从 ShinyLib 库中得到它们，你会发现它非常易用。