flex使用导航容器

 <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="550" height="550" viewSourceURL="src/NavigationContainers/index.html">
<mx:Panel layout="absolute" left="10" top="10" right="10" bottom="10" title="Navigators">

<!--Accordion 容器定义一个子面板序列-->
 <mx:Accordion width="47.5%" height="200" top="36" left="10">
  <mx:Canvas label="Navigation button 1" width="100%" height="100%">
   <mx:Label x="10" y="10" text="Contents 1"/>
  </mx:Canvas>
  <mx:Canvas label="Navigation button 2" width="100%" height="100%">
   <mx:Label x="10" y="10" text="Contents 2"/>
  </mx:Canvas>
  <mx:Canvas label="Navigation button 3" width="100%" height="100%">
   <mx:Label x="10" y="10" text="Contents 3"/>
  </mx:Canvas>
 </mx:Accordion>
 
<!--TabNavigator 选项卡 --> 
 <mx:TabNavigator right="10" width="47.5%" height="200" y="36">
  <mx:Canvas label="Tab 1" width="100%" height="100%">
   <mx:Label x="10" y="10" text="Contents 1"/>
  </mx:Canvas>
  <mx:Canvas label="Tab 2" width="100%" height="100%">
   <mx:Label x="10" y="10" text="Contents 2"/>
  </mx:Canvas>
  <mx:Canvas label="Tab 3" width="100%" height="100%">
   <mx:Label x="10" y="10" text="Contents 3"/>
  </mx:Canvas>
 </mx:TabNavigator>
 
 <mx:Label x="10" y="252" text="ButtonBar"/>
 <mx:Label x="10" y="10" text="Accordion"/>
 <mx:Label x="262.5" y="10" text="TabNavigator"/>
 <mx:Label x="262.5" y="252" text="ViewStack"/>
 <mx:Label x="10" y="308" text="ToggleButtonBar"/>
 <mx:Label x="10" y="364" text="LinkBar"/>
 <mx:Label x="10" y="424" text="TabBar"/>
 
 <!--其他导航绑定到 ViewStack-->
 <mx:ButtonBar x="10" y="278" dataProvider="{myViewStack}" />
 <mx:ToggleButtonBar x="10" y="334" dataProvider="{myViewStack}" />
 <mx:LinkBar x="10" y="390" dataProvider="{myViewStack}" />
 <mx:TabBar x="10" y="444" dataProvider="{myViewStack}" />
 
 <mx:ViewStack id="myViewStack" width="47.5%" height="200" right="10" bottom="10" borderColor="#000000" borderStyle="solid">
  <mx:Canvas label="View 1" width="100%" height="100%">
   <mx:Label text="Contents 1"/>
  </mx:Canvas>
  <mx:Canvas label="View 2" width="100%" height="100%">
   <mx:Label text="Contents 2"/>
  </mx:Canvas>
  <mx:Canvas label="View 3" width="100%" height="100%">
   <mx:Label text="Contents 3"/>
  </mx:Canvas>
 </mx:ViewStack>
</mx:Panel>
</mx:Application>