flex 学习笔记 TabNavigator

ViewStack、TabNavigator

ViewStack是由若干个重合在一起的子容器组成的。但是每次只有一个子容器是可见的。ViewStack不提供可视化的操作来切换它的子容器，但是我们可以通过selectedChild来实现。TabNavigator和viewStack基本相同，只不过它多了一个可视化的标签条来切换内部的子容器。

1<?xml version="1.0"?>
2<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" fontSize="12">
3<mx:VDividedBox width="100%" height="100%">
4 <mx:Panel title="ViewStack Example" height="40%" width="95%"
5 paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
6
7 <mx:HBox borderStyle="solid" width="100%"
8 paddingTop="5" paddingLeft="5" paddingRight="5" paddingBottom="5">
9 <mx:Button label="Search Panel"
10 click="myViewStack.selectedChild=search;"/>
11 <mx:Button label="Customer Panel"
12 click="myViewStack.selectedChild=custInfo;"/>
13 <mx:Button label="Boss Panel"
14 click="myViewStack.selectedChild=accountInfo;"/>
15 </mx:HBox>
16
17 <mx:ViewStack id="myViewStack" borderStyle="solid" width="100%" height="80%">
18 <mx:Canvas id="search" backgroundColor="#FFFFCC" label="Search Info" width="100%" height="100%">
19 <mx:Label text="Search Screen"/>
20 </mx:Canvas>
21 <mx:Canvas id="custInfo" backgroundColor="#CCFFFF" label="Customer Info" width="100%" height="100%">
22 <mx:Label text="Customer Info"/>
23 </mx:Canvas>
24 <mx:Canvas id="accountInfo" backgroundColor="#FFCCFF" label="Boss Info" width="100%" height="100%">
25 <mx:Label text="Boss Info"/>
26 </mx:Canvas>
27 </mx:ViewStack>
28 </mx:Panel>
29 <mx:Panel title="TabNavigator Example" height="60%" width="95%" paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
30 <mx:TabNavigator width="100%" height="100%" id="tabNav">
31 <mx:Canvas id="search1" backgroundColor="#FFFFCC" label="Search Info" width="100%" height="100%">
32 <mx:Label text="Search Screen"/>
33 </mx:Canvas>
34 <mx:Canvas id="custInfo1" backgroundColor="#CCFFFF" label="Customer Info" width="100%" height="100%">
35 <mx:Label text="Customer Info"/>
36 </mx:Canvas>
37 <mx:Canvas id="accountInfo1" backgroundColor="#FFCCFF" label="Boss Info" width="100%" height="100%">
38 <mx:Label text="Boss Info"/>
39 </mx:Canvas>
40 </mx:TabNavigator>
41
42 <mx:HBox borderStyle="solid" width="100%"
43 paddingTop="5" paddingLeft="5" paddingRight="5" paddingBottom="5">
44 <mx:Label text="selectedChild"/>
45 <mx:Button label="Search"
46 click="tabNav.selectedChild=search1;"/>
47 <mx:Button label="Customer"
48 click="tabNav.selectedChild=custInfo1;"/>
49 <mx:Button label="Boss"
50 click="tabNav.selectedChild=accountInfo1;"/>
51 </mx:HBox>
52 <mx:HBox borderStyle="solid" width="100%"
53 paddingTop="5" paddingLeft="5" paddingRight="5" paddingBottom="5">
54 <mx:Label text="selectedIndex"/>
55 <mx:Button label="Search"
56 click="tabNav.selectedIndex=0;"/>
57 <mx:Button label="Customer"
58 click="tabNav.selectedIndex=1"/>
59 <mx:Button label="Boss"
60 click="tabNav.selectedIndex=2"/>
61 </mx:HBox>
62 </mx:Panel>
63 </mx:VDividedBox>
64</mx:Application>