如何使用Flex TabBar-优快云博客

本文介绍了一个简单的 Flex TabBar 控件示例，演示了如何通过 TabBar 实现面板切换，并展示了具体代码实现，包括事件监听和数据绑定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


<?xml version="1.0"?>
<!-- Simple example to demonstrate the TabBar control. -->
<!--
	如何使用Flex TabBar
	MyShareBook.cn 翻译
-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[

            import mx.events.ItemClickEvent;
            import mx.controls.TabBar;

            [Bindable]
            public var STATE_ARRAY:Array = [{label:"Alabama", data:"Montgomery"},
                {label:"Alaska", data:"Juneau"},
                {label:"Arkansas", data:"LittleRock"}
            ];

    		private function clickEvt(event:ItemClickEvent):void {
    			// Access target TabBar control.
    			var targetComp:TabBar = TabBar(event.currentTarget);
    			forClick.text="label is: " + event.label + ", index is: " + 
    				event.index + ", capital is: " +
    				targetComp.dataProvider[event.index].data;
    		}	            
       ]]>
    </mx:Script>

    <mx:Panel title="TabBar Control Example" height="75%" width="75%" 
        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">

        <mx:Label width="100%" color="blue" 
            text="Select a tab to change the current panel."/>

        <mx:TabBar itemClick="clickEvt(event);">
            <mx:dataProvider>{STATE_ARRAY}</mx:dataProvider>
        </mx:TabBar>

        <mx:TextArea id="forClick" height="100%" width="100%"/>

    </mx:Panel>
</mx:Application>