Flex4之各种导航条设计

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

首先来说下TabNavigator

 

<?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>

 

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

  只需要将<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和的效果图一样