Flex Tabbar Icon Switch

    刚开始被Tabbar的显示方式难住了，因为Tabbar的默认显示方式是“Horizontal”的，但项目要求必须要“Vertical”显示，查了一番资料只好才知道，只要设置： direction="vertical"  就OK了。

 

    接着就是要实现 Tabbar Icon Switch 功能。 主要代码如下：

<mx:Script> <!--[CDATA[ import mx.events.ItemClickEvent; [Bindable] [Embed(source="assets/bulletCheck.png")] private var BulletCheck:Class; [Bindable] [Embed(source="assets/1.png")] private var test:Class; private function clickEvt(event:ItemClickEvent):void { var idx:String=""; idx = event.index.toString();if(idx=='0'){child1.icon =BulletCheck; child2.icon = test;child3.icon = test; /* child1.icon="{BulletCheck}"; */}if(idx=='1'){child2.icon =BulletCheck;child1.icon = test;child3.icon = test; /* child1.icon="{BulletCheck}"; */}if(idx=='2'){[Embed(source="assets/1.png")]var newtest:Class;child3.icon =BulletCheck;child1.icon = test;child2.icon = test; /* child1.icon="{BulletCheck}"; */} } ]]--> </mx:Script>

 

---

 

 

运行效果：

 

   

 

---

 

 整个项目代码：

<?xml version="1.0" encoding="utf-8"?><!-- http://blog.flexexamples.com/2007/08/21/adding-icons-to-a-flex-tabbar-control/ --><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <!--[CDATA[ import mx.events.ItemClickEvent; [Bindable] [Embed(source="assets/bulletCheck.png")] private var BulletCheck:Class; [Bindable] [Embed(source="assets/1.png")] private var test:Class; private function clickEvt(event:ItemClickEvent):void { var idx:String=""; idx = event.index.toString();if(idx=='0'){child1.icon =BulletCheck; child2.icon = test;child3.icon = test; /* child1.icon="{BulletCheck}"; */}if(idx=='1'){child2.icon =BulletCheck;child1.icon = test;child3.icon = test; /* child1.icon="{BulletCheck}"; */}if(idx=='2'){[Embed(source="assets/1.png")]var newtest:Class;child3.icon =BulletCheck;child1.icon = test;child2.icon = test; /* child1.icon="{BulletCheck}"; */} } ]]--> </mx:Script> <mx:HBox id="box" width="700" verticalGap="0"> <mx:TabBar id="tabBar" direction="vertical" itemClick="clickEvt(event);" dataProvider="{viewStack}" horizontalGap="20" width="105" /> <mx:ViewStack id="viewStack" width="100%" height="310" backgroundColor="white" borderSides="left bottom right" borderStyle="solid" borderThickness="1"> <mx:Canvas id="child1" icon="{BulletCheck}"> <mx:Label text="one" /> </mx:Canvas> <mx:Canvas id="child2" icon="{test}"> <mx:Label text="two" /> </mx:Canvas> <mx:Canvas id="child3" icon="{test}"> <mx:Label text="three" /> </mx:Canvas> </mx:ViewStack> </mx:HBox> </mx:Application>