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![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
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![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
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![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
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
>
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
2
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
3
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
4
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
5
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
6
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
7
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
8
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
9
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
10
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
11
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
12
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
13
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
14
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
15
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
16
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
17
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
18
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
19
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
20
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
21
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
22
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
23
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
24
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
25
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
26
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
27
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
28
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
29
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
30
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
31
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
32
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
33
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
34
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
35
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
36
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
37
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
38
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
39
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
40
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
41
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
42
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
43
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
44
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
45
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
46
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
47
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
48
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
49
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
50
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
51
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
52
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
53
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
54
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
55
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
56
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
57
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
58
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
59
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
60
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
61
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
62
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
63
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
64
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
转载于:https://blog.51cto.com/aqqle/925330