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;
  5. import mx.containers.VBox;
  6. import mx.containers.ViewStack;
  7. import mx.events.FlexEvent;
  9. import spark.components.Application;
  10. import spark.components.RadioButtonGroup;
  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);
  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....