Flex中TabBar自动换行的实现

 1、首先我们想到的会是自定义Flex4中 的spark组建TabBar的外观

 

2、创建TabBar的skin，将代码中

<s:DataGroup id="dataGroup" width="100%" height="100%">
        <s:layout>
           
 <s:ButtonBarHorizontalLayout gap="-1"/>

        </s:layout>
        <s:itemRenderer>
            <fx:Component>
                <s:ButtonBarButton skinClass="spark.skins.spark.TabBarButtonSkin" />
            </fx:Component>
        </s:itemRenderer>
    </s:DataGroup>

 

改为

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

        </s:layout>
        <s:itemRenderer>
            <fx:Component>
            	<s:ButtonBarButton skinClass="spark.skins.spark.TabBarButtonSkin" label="{data}" width="100%"


/>
            </fx:Component>
        </s:itemRenderer>
    </s:DataGroup>

 3、TitleLayout 有一些属性 columnWidth可以设置每个单元格的大小，记得将ButonBarButton的大小改为100%，这样一个自动换行功能的TabBar就完成了，当TabBar中的标题非常多的时候非常有用

4、如果您有更好的做法或建议请指正，谢谢……

5、本例子代码见附件。