Flex4的导航容器TabNavigator

目前常用的Flex4的导航容器有TabNavigator,Accordion,ViewStack，目前Flex4的大部分可视UI组件都被替换为<s:开头【也通常叫Spark组件】取代了Flex3的<mx:标签

首先来说下TabNavigator

<span style="font-size: large;"><?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"  

			   xmlns:s="library://ns.adobe.com/flex/spark" 

			   xmlns:mx="library://ns.adobe.com/flex/mx" 

             >

	



	<s:layout>

		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />

	</s:layout>

	

	<s:Panel title="Accordion|TabNavigator|ViewStack| Container[TabBar|LinkBar]" width="600" height="100%"

			 color="0x000000" 

			 borderAlpha="0.15">

		

		<s:layout>

			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>

		</s:layout>

		

		<s:Label width="100%" color="0x323232"

				 text="选择一个导航按钮来改变面板"/>

		

		<mx:TabNavigator id="mynavigator" color="0x323232" width="100%" height="100%" resizeToContent="true">

			<!-- Define each panel using a VBox container. -->

			<s:NavigatorContent label="面板1" >

				<mx:Label text="container panel 1"/>

			</s:NavigatorContent>

			

			<s:NavigatorContent label="面板2">

				<mx:Label text="container panel 2"/>

			</s:NavigatorContent>

			

			<s:NavigatorContent label="面板3">

				<mx:Label text="container panel 3"/>

			</s:NavigatorContent>

		</mx:TabNavigator>

		

		<s:Label width="100%" color="0x323232"

				 text="通过下列按钮也可以选择面板的改变"/>

		

		<s:HGroup color="0x323232">

			<s:Button label="选择面板1" click="mynavigator.selectedIndex=0;"/>

			<s:Button label="选择面板2" click="mynavigator.selectedIndex=1;"/>

			<s:Button label="选择面板3" click="mynavigator.selectedIndex=2;"/>

		</s:HGroup>

</s:Panel>

	

</s:Application></span>

　　

 

如果想要换成是如下图的这种导航

  只需要将<mx:TabNavigator换成<mx:Accordion对应的标签即可

最后要说明的是ViewStack可不一样，如果我们直接将<mx:TabNavigator换成<mx:ViewStack那么只能显示一项的内容并且也没有导航条，需要添加一行导航条代码即可

在<mx:TabNavigator代码块之前加上<mx:LinkBar dataProvider="{mynavigator}" />

或者是<mx:TabBar dataProvider="{mynavigator}" />或者是

<s:ButtonBar dataProvider="{mynavigator}" />

或者是<mx:ToggleButtonBar dataProvider="{mynavigator}"/>

都会显示出很好的导航条效果，这个mynavigator指的是<mx:ViewStack id="navigator"的这个ID了

LinkBar的效果图

TabBar的效果图

ButtonBar和ToggerButtonBar和的效果图一样