Flex Spark form, horizontally aligning form items

问题:

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?

回答1:

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>