目前常用的Flex4的导航容器有TabNavigator,Accordion,ViewStack，目前Flex4的大部分可视UI组件都被替换为<s:开头【也通常叫Spark组件】取代了Flex3的<mx:标签
首先来说下TabNavigator
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48 |
<span style="font-size: large;"><?xml version="1.0"
encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" > <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和的效果图一样
Flex4的导航容器TabNavigator,布布扣,bubuko.com
原文：http://www.cnblogs.com/regalys168/p/3626886.html