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

I haven't had a chance to really explore the new Spark Form controls, but one thing they do is re-introduce constraint columns and rows. Perhaps they were under-used in Flex 3, but I was sad to see them go in Flex 4.

You should be able to setup some rows and columns to lay the form elements out and keep things aligned between columns this way.

Some Adobe resources:

• The Spark Form, Spark FormHeading, and Spark FormItem containers
• Using constraint rows and columns with MX containers and the Spark FormLayout class

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>