tile布局的ButtonBar

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/26/creating-a-tile-layout-fxbuttonbar-control-in-flex-gumbo/ -->
<s:Application name="Spark_ButtonBar_TileLayout_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">

    <s:ButtonBar id="btnBar"
            horizontalCenter="0"
            verticalCenter="0"
            skinClass="skins.CustomButtonBarSkin">
        <s:dataProvider>
            <s:ArrayList source="[The,Quick,Brown,Fox,Jumps,Over,The,Lazy,Dog]" />
        </s:dataProvider>
    </s:ButtonBar>

</s:Application>

 

CustomButtonBarSkin：

 

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/26/creating-a-tile-layout-fxbuttonbar-control-in-flex-gumbo/ -->
<s:Skin name="CustomButtonBarSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        alpha.disabled="0.5">
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>

    <fx:Metadata>
        <![CDATA[
            [HostComponent("spark.components.ButtonBar")]
        ]]>
    </fx:Metadata>

    <fx:Declarations>
        <fx:Component id="middleButton">
            <s:ButtonBarButton skinClass="spark.skins.default.ButtonBarMiddleButtonSkin" />
        </fx:Component>
    </fx:Declarations>

    <s:DataGroup id="dataGroup" width="100%" height="100%">
        <s:layout>
            <s:TileLayout requestedColumnCount="3"
                    columnWidth="200"
                    horizontalGap="-1"
                    verticalGap="-1" />
        </s:layout>
    </s:DataGroup>

</s:Skin>