Flex中如何利用getChildAt()和setStyle()，设置TabBar单个Tab样式

main.mxml

1. <?xml version="1.0"?>
2. <mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"
3. layout="vertical"
4. verticalAlign="middle"
5. backgroundColor="white">
7. <mx:Script>
8. <![CDATA[
9. import mx.events.ItemClickEvent;
10. import mx.controls.tabBarClasses.Tab;
12. private function tabBar_creationComplete():void {
13. var colorArr:Array = ["red", "haloOrange", "yellow", "haloGreen", "haloBlue"];
14. var color:String;
15. var tab:Tab;
16. var idx:uint;
17. var len:uint = tabBar.dataProvider.length;
19. for (idx = 0; idx < len; idx++) {
20. var i:int = idx % colorArr.length;
21. color = colorArr[i];
22. tab = Tab(tabBar.getChildAt(idx));
23. tab.setStyle("fillColors", [color, "white"]);
24. tab.setStyle("fillAlphas", [1.0, 1.0]);
25. tab.setStyle("backgroundColor", color);
26. }
27. }
29. private function tabBar_itemClick(evt:ItemClickEvent):void {
30. viewStack.selectedIndex = evt.index;
31. }
32. ]]>
33. </mx:Script>
35. <mx:Arrayid="arr">
36. <mx:Objectlabel="Red" />
37. <mx:Objectlabel="Orange" />
38. <mx:Objectlabel="Yellow" />
39. <mx:Objectlabel="Green" />
40. <mx:Objectlabel="Blue" />
41. </mx:Array>
43. <mx:TabBarid="tabBar"
44. dataProvider="{arr}"
45. creationComplete="tabBar_creationComplete();"
46. itemClick="tabBar_itemClick(event);"/>
48. <mx:ViewStackid="viewStack"
49. width="{tabBar.width}"
50. styleName="plain">
51. <mx:VBoxid="redVBox" width="100%" height="100">
52. <mx:Labeltext="Red VBox" />
53. </mx:VBox>
54. <mx:VBoxid="orangeVBox" width="100%" height="100">
55. <mx:Labeltext="Orange VBox" />
56. </mx:VBox>
57. <mx:VBoxid="yellowVBox" width="100%" height="100">
58. <mx:Labeltext="Yellow VBox" />
59. </mx:VBox>
60. <mx:VBoxid="greenVBox" width="100%" height="100">
61. <mx:Labeltext="Green VBox" />
62. </mx:VBox>
63. <mx:VBoxid="blueVBox" width="100%" height="100">
64. <mx:Labeltext="Blue VBox" />
65. </mx:VBox>
66. </mx:ViewStack>
68. </mx:Application>