apache-flex - Multi column forms in Adobe Flex

Question

What is the best way to make a multi column form in Flex?

My current solution if more than one column is required is to put the form items inside an <s:HGroup> but the alignment isn't the best.

Is there a better way?

Thank you, Fred

Answer 1

新しい Spark フォーム コントロールを実際に調べる機会はありませんでしたが、それらが行うことの 1 つは、制約の列と行を再導入することです。Flex 3 ではあまり使われていなかったのかもしれませんが、Flex 4 で使われなくなったのは残念です。

いくつかの行と列を設定してフォーム要素を配置し、このように列間で物事を整列させることができるはずです。

アドビのリソース:

• Spark Form、Spark FormHeading、および Spark FormItem コンテナー
• MX コンテナーと Spark FormLayout クラスでの制約の行と列の使用

Answer 2

グリッド コントロールを使用するのはどうですか。Hbox/Hgroup を使用した場合と同じパフォーマンスではありませんが、必要なことは実行できます。http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/containers/Grid.html#includeExamplesSummary

<s:VGroup left="10" right="10" top="10" bottom="10">
        <s:Label width="100%" color="blue" 
            text="A 3 by 3 Grid container of Button controls."/>

        <mx:Grid>
            <mx:GridRow>
                <mx:GridItem>
                    <s:Button label="Row 1 Col 1" width="100"/>
                </mx:GridItem>
                <mx:GridItem>
                    <s:Button label="Row 1 Col 2" width="100"/>
                </mx:GridItem>
                <mx:GridItem>
                    <s:Button label="Row 1 Col 3" width="100"/>
                </mx:GridItem>
            </mx:GridRow>

            <mx:GridRow>
                <mx:GridItem>
                    <s:Button label="Row 2 Col 1" width="100"/>
                </mx:GridItem>
                <mx:GridItem>
                    <s:Button label="Row 2 Col 2" width="100"/>
                </mx:GridItem>
                <mx:GridItem>
                    <s:Button label="Row 2 Col 3" width="100"/>
                </mx:GridItem>
            </mx:GridRow>

            <mx:GridRow>
                <mx:GridItem>
                    <s:Button label="Row 3 Col 1" width="100"/>
                </mx:GridItem>
                <mx:GridItem>
                    <s:Button label="Row 3 Col 2" width="100"/>
                </mx:GridItem>
                <mx:GridItem>
                    <s:Button label="Row 3 Col 3" width="100"/>
                </mx:GridItem>
            </mx:GridRow>
        </mx:Grid>
    </s:VGroup>