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

最新推荐文章于 2024-07-19 17:43:38 发布

hanyiduo1

最新推荐文章于 2024-07-19 17:43:38 发布

阅读量192

点赞数

分类专栏： Flex 文章标签： Flex XML

本文链接：https://blog.csdn.net/hanyiduo1/article/details/83323140

版权

Flex 专栏收录该内容

52 篇文章 0 订阅

订阅专栏


<?xml version="1.0"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
        layout="vertical" 
        verticalAlign="middle" 
        backgroundColor="white"> 

    <mx:Script> 
    <![CDATA[ 
        import mx.events.ItemClickEvent; 
        import mx.controls.tabBarClasses.Tab; 

        private function tabBar_creationComplete():void { 
            var colorArr:Array = ["red", "haloOrange", "yellow", "haloGreen", "haloBlue"]; 
            var color:String; 
            var tab:Tab; 
            var idx:uint; 
            var len:uint = tabBar.dataProvider.length; 

            for (idx = 0; idx < len; idx++) { 
                var i:int = idx % colorArr.length; 
                color = colorArr[i]; 
                tab = Tab(tabBar.getChildAt(idx)); 
                tab.setStyle("fillColors", [color, "white"]); 
                tab.setStyle("fillAlphas", [1.0, 1.0]); 
                tab.setStyle("backgroundColor", color); 
            } 
        } 

        private function tabBar_itemClick(evt:ItemClickEvent):void { 
            viewStack.selectedIndex = evt.index; 
        } 
    ]]> 
    </mx:Script> 

    <mx:Array id="arr"> 
        <mx:Object label="Red" /> 
        <mx:Object label="Orange" /> 
        <mx:Object label="Yellow" /> 
        <mx:Object label="Green" /> 
        <mx:Object label="Blue" /> 
    </mx:Array> 

    <mx:TabBar id="tabBar" 
            dataProvider="{arr}" 
            creationComplete="tabBar_creationComplete();" 
            itemClick="tabBar_itemClick(event);" /> 

    <mx:ViewStack id="viewStack" 
            width="{tabBar.width}" 
            styleName="plain"> 
        <mx:VBox id="redVBox" width="100%" height="100"> 
            <mx:Label text="Red VBox" /> 
        </mx:VBox> 
        <mx:VBox id="orangeVBox" width="100%" height="100"> 
            <mx:Label text="Orange VBox" /> 
        </mx:VBox> 
        <mx:VBox id="yellowVBox" width="100%" height="100"> 
            <mx:Label text="Yellow VBox" /> 
        </mx:VBox> 
        <mx:VBox id="greenVBox" width="100%" height="100"> 
            <mx:Label text="Green VBox" /> 
        </mx:VBox> 
        <mx:VBox id="blueVBox" width="100%" height="100"> 
            <mx:Label text="Blue VBox" /> 
        </mx:VBox> 
    </mx:ViewStack> 

</mx:Application>