我的Flex之旅（3）导航容器
通常，我们浏览普通web页面的时候，点击一个链接，就进入一个新的页面，因此Web页面通常带有导航条，但是我们Flex的内容大都是包含在一个swf文件里的，一般情况下，我们会有一个主页面，其中会有多个组件，来回切换，达到导航效果。Flex为我们提供了导航容器供我们切换组件或内容用。
那么现在我们就来学习下ViewStack导航容器，我们先建立一个mxml Application页，并设置它的布局方式为Layout=”vertial”.
同时，拖动3个Panel容器在主容器里面，并为Title，lable，ID赋值。要注意的是设置它们的宽、高都相同（默认即可）
当你拖动3个Panel容器到主容器时候会发现屏幕不够用了，别担心，我们可以调整下显示界面，在舞台的上面可以找到如图：
您设置Desingn area为你需要现在的分辨率就行了，目的很简单，让它能给我们看到，呵呵。
同时我们为这3个Panel容器拖进Text标签，为Text赋值。
那么现在我们要用到ViewStack导航容器了，我们切换到源代码视图吧。敲写<mx:ViewStack id=”vsPage”></mx:ViewStack>(注意要给它命名，等下你就知道用处)（当你敲上<mx:的时候会有代码提示滴）把3个Panel容器包含在其里面。如下代码所示：
代码
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:ViewStack id=”vsPage”>
<mx:Panel width="250" height="200" layout="absolute" title="First Panel" label="First Panel">
<mx:Text x="10" y="10" text="天下英雄出我辈，一入江湖岁月催。鸿图霸业谈笑中，不胜人生一场醉。" width="210" height="100"/>
</mx:Panel>
<mx:Panel width="250" height="200" layout="absolute" title="Second Panel" label="Second Panel">
<mx:Text x="10" y="10" text="天下英雄出我辈，一入江湖岁月催。鸿图霸业谈笑中，不胜人生一场醉。" width="210" height="100"/>
</mx:Panel>
<mx:Panel width="250" height="200" layout="absolute" title="Third Panel" label="Third Panel">
<mx:Text x="10" y="10" text="天下英雄出我辈，一入江湖岁月催。鸿图霸业谈笑中，不胜人生一场醉。" width="210" height="100"/>
</mx:Panel>
</mx:ViewStack>
</mx:Application>
切换回Design视图，我们会发现，3个Panel怎么变成显示1个了，那是当然的了，ViewStack一次只能显示一个容器，我们可以通过调用方法等来回切换ViewStack里面的容器，达到导航效果。
那么现在，我们就来实现这种切换吧。
我们从Nagitors 中拖动一个ButtonBar控件在主容器上，使得ViewStack在他的下面，并在右侧栏中设置dataProvider为{vsPage}，这是绑定语法，目的是让ButtonBar的数据来源为ViewStack。
当然我们还是切换源代码编写比较好，毕竟我们以后都得跟代码打交道，多多熟悉下代码。
我们敲上这一段：<mx:ButtonBar dataProvider="{vsPage}"/> 在Application跟ViewStack标签之间。切换为Design 视图，你会看到：
您可以来回切换Panel。是不是很神奇。
其实还有一些控件，比如：ToggleButtonBar、LinkBar都类似于ButtonBar ，您不妨试试，操作一样，可以实现相同功能。
当然不止ViewStack可以实现导航，我们的TabNavigator跟Accordion导航容器都可以实现。
那么就让我们来用这2个导航容器吧。
现在我们只需要替换<mx:ViewStack id=”vsPage”></mx:ViewStack>
为我们新的导航容器就行了，例如：<mx:Accordion></mx:Accordion>或者是<mx:TabNavigator></mx:TabNavigator>
效果分别如图：1：折叠菜单。2：Tab选项卡
当然的，我们可以通过代码事件实现导航功能，也即是用ActionScript3.0实现。具体做法如下:
添加一段:
代码
<mx:HBox>
<mx:Button label="first" click="vsPage.selectedIndex=0"/>
<mx:Button label="second" click="vsPage.selectedIndex=1"/>
<mx:Button label="tihrd" click="vsPage.selectedIndex=2"/>
</mx:HBox>
在ViewStack上面(当然这个控件有个ID为vsPage)。你知道的Button有个Click事件，我们点击Button的时候就调用事件，
vsPage.selectedIndex=0这一句表示，选中ViewStack的第一个索引，其他的你就知道了。
当然，您可以不用索引也可以实现导航，例如：
代码
<mx:HBox>
<mx:Button label="first" click="vsPage.selectedChild=pn1"/>
<mx:Button label="second" click="vsPage.selectedChild=pn2"/>
<mx:Button label="tihrd" click="vsPage.selectedChild=pn3"/>
</mx:HBox>
其中vsPage.selectedChild=pn1这一句表示选中ViewStack子项名为pn1的Panel容器。
实现代码为：
代码
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<!--<mx:ButtonBar dataProvider="{vsPage}"/>-->
<!--<mx:HBox>
<mx:Button label="first" click="vsPage.selectedIndex=0"/>
<mx:Button label="second" click="vsPage.selectedIndex=1"/>
<mx:Button label="tihrd" click="vsPage.selectedIndex=2"/>
</mx:HBox>-->
<mx:HBox>
<mx:Button label="first" click="vsPage.selectedChild=pn1"/>
<mx:Button label="second" click="vsPage.selectedChild=pn2"/>
<mx:Button label="tihrd" click="vsPage.selectedChild=pn3"/>
</mx:HBox>
<mx:ViewStack id="vsPage">
<mx:Panel width="250" height="200" layout="absolute" title="First Panel" id="pn1" label="First Panel">
<mx:Text x="10" y="10" text="天下英雄出我辈，一入江湖岁月催。鸿图霸业谈笑中，不胜人生一场醉。" width="210" height="100"/>
</mx:Panel>
<mx:Panel width="250" height="200" layout="absolute" title="Second Panel" id="pn2" label="Second Panel">
<mx:Text x="10" y="10" text="天下英雄出我辈，一入江湖岁月催。鸿图霸业谈笑中，不胜人生一场醉。" width="210" height="100"/>
</mx:Panel>
<mx:Panel width="250" height="200" layout="absolute" title="Third Panel" id="pn3" label="Third Panel">
<mx:Text x="10" y="10" text="天下英雄出我辈，一入江湖岁月催。鸿图霸业谈笑中，不胜人生一场醉。" width="210" height="100"/>
</mx:Panel>
</mx:ViewStack>
</mx:Application>
下一节我们来介绍下状态，跟过渡
