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

  • 本站文章除注明转载外,均为本站原创或者翻译。
  • 本站文章欢迎各种形式的转载,但请18岁以上的转载者注明文章出处,尊重我的劳动,也尊重你的智商;
  • 本站部分原创和翻译文章提供markdown格式源码,欢迎使用文章源码进行转载;
  • 本博客采用 WPCMD 维护;
  • 本文标题:【译】使用ConstraintLayout创建复杂的表单布局
  • 本文链接:http://zengrong.net/post/1572.htm

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

原文地址:Flex – Complex Form layouts with ContraintLayout

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


Get Adobe Flash player

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

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

上面的表单在 Spark Form 容器中使用 ConstraintLayout 替代了 FormLayout ,这个 Layout 为 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"
               viewSourceURL="srcview/index.html">
    <s:layout>
        <s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>
    </s:layout>

    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <s:Form>
        <s:layout>
            <s:ConstraintLayout>
                <s:constraintRows>
                    <s:ConstraintRow id="row1" />
                    <s:ConstraintRow id="row2"/>
                    <s:ConstraintRow id="row3"/>
                </s:constraintRows>
                <s:constraintColumns>
                    <s:ConstraintColumn id="col1" width="100"/>
                    <s:ConstraintColumn id="col2" width="100"/>
                    <s:ConstraintColumn id="col3" width="100"/>
                </s:constraintColumns>
            </s:ConstraintLayout>
        </s:layout>

        <s:FormItem label="First Name"
                    left="col1:3" right="col2:53" top="row1:0" bottom="row1:0"
                    skinClass="com.shinynet.shinylib.skins.CondensedStackedFormItemSkin">
            <s:TextInput width="100%"/>
        </s:FormItem>
        <s:FormItem label="Last Name"
                    left="col2:53" right="col3:3" top="row1:0" bottom="row1:0"
                    skinClass="com.shinynet.shinylib.skins.CondensedStackedFormItemSkin">
            <s:TextInput width="100%"/>
        </s:FormItem>

        <s:FormItem label="Address"
                    left="col1:3" right="col3:3" top="row2:0" bottom="row2:0"
                    skinClass="com.shinynet.shinylib.skins.CondensedStackedFormItemSkin">
            <s:TextInput width="100%"/>
        </s:FormItem>

        <s:FormItem label="City"
                    left="col1:3" right="col1:3" top="row3:0" bottom="row3:0"
                    skinClass="com.shinynet.shinylib.skins.CondensedStackedFormItemSkin">
            <s:TextInput width="100%"/>
        </s:FormItem>
        <s:FormItem label="State"
                    left="col2:3" right="col2:3" top="row3:0" bottom="row3:0"
                    skinClass="com.shinynet.shinylib.skins.CondensedStackedFormItemSkin">
            <s:TextInput width="100%"/>
        </s:FormItem>
        <s:FormItem label="Zip"
                    left="col3:3" right="col3:3" top="row3:0" bottom="row3:0"
                    skinClass="com.shinynet.shinylib.skins.CondensedStackedFormItemSkin">
            <s:TextInput width="100%"/>
        </s:FormItem>
    </s:Form>

</s:Application>

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