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、本例子代码见附件。