flex组件学习——TileGroup

TileGroup组件可以很好的用来行列对齐

<?xml version="1.0" encoding="utf-8"?>
 <!-- Simple example to demonstrate the Spark Group component. -->
 <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:Panel title="TileGroup Component Example"
             width="75%" height="75%"
             horizontalCenter="0" verticalCenter="0">
        <s:VGroup left="10" right="10" top="10" bottom="10">

            <s:TileGroup horizontalGap="40" verticalGap="4" requestedColumnCount="3">
                <s:Button label="1" width="50" height="50" />
                <s:Button label="2" width="50" height="50" />
                <s:Button label="3" width="50" height="50" />
                <s:Button label="4" width="50" height="50" />
                <s:Button label="5" width="50" height="50" />
                <s:Button label="6" width="50" height="50" />
                <s:Button label="7" width="50" height="50" />
                <s:Button label="8" width="50" height="50" />
                <s:Button label="9" width="50" height="50" />
            </s:TileGroup>

            <s:TileGroup id="test" horizontalGap="120" verticalGap="20" >
                <s:VGroup id="vGroup">
                    <s:HGroup id="hGroup1">
                        <s:Button label="1" width="50" height="50" />
                        <s:Button label="2" width="50" height="50" />
                        <s:Button label="3" width="50" height="50" />
                    </s:HGroup>
                    <s:HGroup id="hGroup2">
                        <s:Button label="4" width="50" height="50" />
                        <s:Button label="5" width="50" height="50" />
                        <s:Button label="6" width="50" height="50" />
                        <s:Button label="7" width="50" height="50" />
                        <s:Button label="8" width="50" height="50" />
                        <s:Button label="9" width="50" height="50" />
                    </s:HGroup>
                </s:VGroup>
            </s:TileGroup>

        </s:VGroup>
    </s:Panel>

 </s:Application>

效果图：

注意：第二个TileGroup的horizontalGap设置的值没有用啊