目前常用的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和的效果图一样