1          Flex API里面介绍viewstack：

MX ViewStack 导航器容器由一组彼此上下堆叠的子容器组成，其中一次只可以显示一个子容器。选择另一个子容器后，它将显示在原来子容器的位置处，所以看起来好像此子容器替换了原来的子容器。但是，原来的子容器仍然存在，只不过它现在处于不可见状态。

注意：MX 导航器容器的直接子容器必须为 MX 容器（MX 布局或 MX 导航器容器）或者 Spark NavigatorContent 容器。您不能直接在某一导航器中嵌套控件或除 Spark NavigatorContent 容器之外的 Spark 容器；它们必须是子 MX 容器的子容器。

ViewStack 容器不提供用于选择当前哪个子容器可见的用户界面。通常，在 ActionScript 中设置其 selectedIndex 或 selectedChild 属性以响应某些用户操作。或者，可以将 MX LinkBar、TabBar、ButtonBar 或者 ToggleButtonBar 控件或 Spark ButtonBar 控件与 ViewStack 容器关联，以提供一个导航界面。为此，请将 ViewStack 容器指定为 LinkBar、TabBar 或 ToggleButtonBar 容器的 dataProvider 属性的值。

2    简单应用：

  2.1   selectedChild

 

 。Work.mxml组件里的代码：

 

 
  
  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <local:WorkAS xmlns:fx="http://ns.adobe.com/mxml/2009"   
  3.               xmlns:s="library://ns.adobe.com/flex/spark"   
  4.               xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:local="*" width="400" height="300"> 
  5.     <fx:Declarations> 
  6.         <!-- 将非可视元素（例如服务、值对象）放在此处 --> 
  7.         <s:RadioButtonGroup id="index"/> 
  8.     </fx:Declarations> 
  9.     <mx:VBox> 
  10.         <mx:HBox> 
  11.     <s:RadioButton label="111"  groupName="index"/> 
  12.     <s:RadioButton label="222"  groupName="index"/> 
  13.     <s:RadioButton label="333"  groupName="index"/> 
  14.     <s:RadioButton label="444"  groupName="index"/> 
  15.             </mx:HBox> 
  16.         <mx:VBox> 
  17.     <mx:ViewStack id="viewstack"> 
  18.         <mx:VBox id="new1"> 
  19.             <s:Button label="1111"/> 
  20.         </mx:VBox> 
  21.         <mx:VBox id="new2"> 
  22.             <s:Button label="2222"/> 
  23.         </mx:VBox> 
  24.         <mx:VBox id="new3"> 
  25.             <s:Button label="3333"/> 
  26.         </mx:VBox> 
  27.         <mx:VBox id="new4"> 
  28.             <s:Button label="4444"/> 
  29.         </mx:VBox> 
  30.     </mx:ViewStack> 
  31.             </mx:VBox> 
  32.         </mx:VBox>  
  33. </local:WorkAS> 
 
  

 WorkAS.as文件里面的代码：
  
 
  
 
 
  
 
  
  1. package  
  2. {  
  3.     import flash.events.Event;  
  4.       
  5.     import mx.containers.VBox;  
  6.     import mx.containers.ViewStack;  
  7.     import mx.events.FlexEvent;  
  8.       
  9.     import spark.components.Application;  
  10.     import spark.components.RadioButtonGroup;  
  11.       
  12.     public class WorkAS extends Application  
  13.     {  
  14.         public var index:RadioButtonGroup;  
  15.         public var viewstack:ViewStack;  
  16.         public var new1:VBox;  
  17.         public var new2:VBox;  
  18.         public var new3:VBox;  
  19.         public var new4:VBox;  
  20.         public function WorkAS()  
  21.         {  
  22.             super();  
  23.             addEventListener(FlexEvent.CREATION_COMPLETE,initer);  
  24.         }  
  25.         private function initer(event:FlexEvent):void{  
  26.             index.addEventListener(Event.CHANGE,change);  
  27.               
  28.         }  
  29.         private function change(event:Event):void{  
  30.             if("111"==index.selectedValue){  
  31.                 viewstack.selectedChild=new1;  
  32.             }  
  33.             else if("222"==index.selectedValue){  
  34.                 viewstack.selectedChild=new2;  
  35.             }  
  36.             else if("333"==index.selectedValue){  
  37.                 viewstack.selectedChild=new3;  
  38.             }  
  39.             else if("444"==index.selectedValue){  
  40.                 viewstack.selectedChild=new4;  
  41.             }  
  42.         }  
  43.     }  
  44. } 
 
  
运行效果：
 
  
    
 
  
 
 
  
 
 
  
 2.2  ToggleButtonBar
 
  
mxml组件代码：
 
  
 
  
  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <Day3:DMMainAS xmlns:fx="http://ns.adobe.com/mxml/2009"   
  3.                xmlns:s="library://ns.adobe.com/flex/spark"   
  4.                xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:Day3="Day3.*" > 
  5.     <fx:Declarations> 
  6.         <!-- 将非可视元素（例如服务、值对象）放在此处 --> 
  7.     </fx:Declarations> 
  8. <mx:VBox>
  9.     <mx:ToggleButtonBar dataProvider="viewstack"> 
  10.     </mx:ToggleButtonBar> 
  11.     <mx:ViewStack id="viewstack"> 
  12.         <mx:VBox label="First"> 
  13.             <s:Button label="按钮1111"/> 
  14.         </mx:VBox> 
  15.         <mx:VBox label="Second"> 
  16.             <s:Button label="按钮2222"/> 
  17.         </mx:VBox> 
  18.         <mx:VBox label="Third"> 
  19.             <s:Button label="按钮3333"/> 
  20.  </mx:VBox> 
  21.  </mx:ViewStack> 
  22. </mx:VBox>
  23. </Day3:DMMainAS> 
 
  
 运行效果：
 
  
 
 
  
      
 
  
 
 
  
 以上 viewstack的两种基本用法 学习ING....