Flex的火花形式，水平对齐表格的项目 [英] Flex Spark form, horizontally aligning form items

问题描述

这是该方案：

 ＆LT; S：应用的xmlns：FX =htt​​p://ns.adobe.com/mxml/2009
               XMLNS：S =库：//ns.adobe.com/flex/spark
               的xmlns：MX =库：//ns.adobe.com/flex/mx=了minWidth955了minHeight =600＆GT;
    ＆所述氏：HGroup＆GT;
        ＆LT; S：表＆GT;
            ＆LT; S：FormItem中的标签=label1的＆GT;
                ＆所述氏：的TextInput /＆GT;
            ＆LT; / S：的FormItem＆GT;
            ＆LT; S：FormItem中的标签=标签2＆GT;
                ＆所述氏：的TextInput /＆GT;
            ＆LT; / S：的FormItem＆GT;
            ＆LT; S：FormItem中的标签=LABEL3＆GT;
                ＆所述氏：的TextInput /＆GT;
            ＆LT; / S：的FormItem＆GT;
        ＆LT; / S：表＆GT;
        ＆LT; S：表＆GT;
            ＆LT; S：FormItem中的标签=label1的＆GT;
                ＆LT; S：标签文本=soemthing/＆GT;
            ＆LT; / S：的FormItem＆GT;
            ＆LT; S：FormItem中的标签=标签2＆GT;
                ＆LT; S：标签文本=soemthing/＆GT;
            ＆LT; / S：的FormItem＆GT;
            ＆LT; S：FormItem中的标签=LABEL3＆GT;
                ＆LT; S：标签文本=soemthing/＆GT;
            ＆LT; / S：的FormItem＆GT;
        ＆LT; / S：表＆GT;
    ＆所述; /秒：HGroup＆GT;
＆LT; / S：用途＆gt;
 

和问题是，这将是正确的方式来对齐左表中的每FormItem中使用正确的格式？

上的那些

解决方案

使用 TileLayout 为表单：

  

 ＆LT; S：应用的xmlns：FX =htt​​p://ns.adobe.com/mxml/2009
               XMLNS：S =库：//ns.adobe.com/flex/spark
               的xmlns：MX =库：//ns.adobe.com/flex/mx＆GT;

    ＆LT; S：表＆GT;
        ＆LT; S：布局＆GT;
            ＆所述氏：TileLayout requestedColumnCount =2
                          verticalAlign =中间/＆GT;
        ＆LT; / S：布局＆GT;

        ＆LT; S：FormItem中的标签=label1的＆GT;
            ＆所述氏：的TextInput /＆GT;
        ＆LT; / S：的FormItem＆GT;
        ＆LT; S：FormItem中的标签=label1的＆GT;
            ＆LT; S：标签文本=东西/＆GT;
        ＆LT; / S：的FormItem＆GT;

        ＆LT; S：FormItem中的标签=标签2＆GT;
            ＆所述氏：的TextInput /＆GT;
        ＆LT; / S：的FormItem＆GT;
        ＆LT; S：FormItem中的标签=标签2＆GT;
            ＆LT; S：标签文本=东西/＆GT;
        ＆LT; / S：的FormItem＆GT;

        ＆LT; S：FormItem中的标签=LABEL3＆GT;
            ＆所述氏：的TextInput /＆GT;
        ＆LT; / S：的FormItem＆GT;
        ＆LT; S：FormItem中的标签=LABEL3＆GT;
            ＆LT; S：标签文本=东西/＆GT;
        ＆LT; / S：的FormItem＆GT;

    ＆LT; / S：表＆GT;

＆LT; / S：用途＆gt;
 

This is the scenario:

<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">
    <s:HGroup>
        <s:Form>
            <s:FormItem label="label1">
                <s:TextInput/>
            </s:FormItem>
            <s:FormItem label="label2">
                <s:TextInput/>
            </s:FormItem>
            <s:FormItem label="label3">
                <s:TextInput/>
            </s:FormItem>
        </s:Form>
        <s:Form>
            <s:FormItem label="label1">
                <s:Label text="soemthing"/>
            </s:FormItem>
            <s:FormItem label="label2">
                <s:Label text="soemthing"/>
            </s:FormItem>
            <s:FormItem label="label3">
                <s:Label text="soemthing"/>
            </s:FormItem>
        </s:Form>
    </s:HGroup>
</s:Application>

And the question is, which would be the right way to align each formItem of the left form with the ones on the right form?

解决方案

Use TileLayout for your form:

<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">

    <s:Form>
        <s:layout>
            <s:TileLayout requestedColumnCount="2"
                          verticalAlign="middle" />
        </s:layout>

        <s:FormItem label="label1">
            <s:TextInput />
        </s:FormItem>
        <s:FormItem label="label1">
            <s:Label text="something" />
        </s:FormItem>

        <s:FormItem label="label2">
            <s:TextInput />
        </s:FormItem>
        <s:FormItem label="label2">
            <s:Label text="something" />
        </s:FormItem>

        <s:FormItem label="label3">
            <s:TextInput />
        </s:FormItem>
        <s:FormItem label="label3">
            <s:Label text="something" />
        </s:FormItem>

    </s:Form>

</s:Application>

这篇关于Flex的火花形式，水平对齐表格的项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！