flex viewstack的简单应用

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组件里的代码：

?

 
 

<?xml?version="1.0"?encoding="utf-8"?>?
  
  

<local:WorkAS?xmlns:fx="http://ns.adobe.com/mxml/2009"? ?

  
  

??????????????xmlns:s="library://ns.adobe.com/flex/spark"? ?

  
  

??????????????xmlns:mx="library://ns.adobe.com/flex/mx"?xmlns:local="*"?width="400"?height="300">?

  
  

????<fx:Declarations>?

  
  

????????<!--?将非可视元素（例如服务、值对象）放在此处?-->?

  
  

????????<s:RadioButtonGroup?id="index"/>?

  
  

????</fx:Declarations>?

  
  

????<mx:VBox>?

  
  

????????<mx:HBox>?

  
  

????<s:RadioButton?label="111"??groupName="index"/>?

  
  

????<s:RadioButton?label="222"??groupName="index"/>?

  
  

????<s:RadioButton?label="333"??groupName="index"/>?

  
  

????<s:RadioButton?label="444"??groupName="index"/>?

  
  

????????????</mx:HBox>?

  
  

????????<mx:VBox>?

  
  

????<mx:ViewStack?id="viewstack">?

  
  

????????<mx:VBox?id="new1">?

  
  

????????????<s:Button?label="1111"/>?

  
  

????????</mx:VBox>?

  
  

????????<mx:VBox?id="new2">?

  
  

????????????<s:Button?label="2222"/>?

  
  

????????</mx:VBox>?

  
  

????????<mx:VBox?id="new3">?

  
  

????????????<s:Button?label="3333"/>?

  
  

????????</mx:VBox>?

  
  

????????<mx:VBox?id="new4">?

  
  

????????????<s:Button?label="4444"/>?

  
  

????????</mx:VBox>?

  
  

????</mx:ViewStack>?

  
  

????????????</mx:VBox>?

  
  

????????</mx:VBox>??

  
  

</local:WorkAS>?

 
 

WorkAS.as文件里面的代码：
?

?

 
 

package ?
  
  
{ ?
  
  
????import?flash.events.Event; ?
  
  
???? ?
  
  
????import?mx.containers.VBox; ?
  
  
????import?mx.containers.ViewStack; ?
  
  
????import?mx.events.FlexEvent; ?
  
  
???? ?
  
  
????import?spark.components.Application; ?
  
  
????import?spark.components.RadioButtonGroup; ?
  
  
???? ?
  
  
????public?class?WorkAS?extends?Application ?
  
  
????{ ?
  
  
????????public?var?index:RadioButtonGroup; ?
  
  
????????public?var?viewstack:ViewStack; ?
  
  
????????public?var?new1:VBox; ?
  
  
????????public?var?new2:VBox; ?
  
  
????????public?var?new3:VBox; ?
  
  
????????public?var?new4:VBox; ?
  
  
????????public?function?WorkAS() ?
  
  
????????{ ?
  
  
????????????super(); ?
  
  
????????????addEventListener(FlexEvent.CREATION_COMPLETE,initer); ?
  
  
????????} ?
  
  
????????private?function?initer(event:FlexEvent):void{ ?
  
  
????????????index.addEventListener(Event.CHANGE,change); ?
  
  
???????????? ?
  
  
????????} ?
  
  
????????private?function?change(event:Event):void{ ?
  
  
????????????if("111"==index.selectedValue){ ?
  
  

????????????????viewstack.selectedChild=new1; ?

  
  
????????????} ?
  
  
????????????else?if("222"==index.selectedValue){ ?
  
  

????????????????viewstack.selectedChild=new2; ?

  
  
????????????} ?
  
  
????????????else?if("333"==index.selectedValue){ ?
  
  

????????????????viewstack.selectedChild=new3; ?

  
  
????????????} ?
  
  
????????????else?if("444"==index.selectedValue){ ?
  
  

????????????????viewstack.selectedChild=new4; ?

  
  
????????????} ?
  
  
????????} ?
  
  
????} ?
  
  
}?
 
 

运行效果：

?

?

?2.2? ToggleButtonBar

mxml组件代码：

 
 

<?xml?version="1.0"?encoding="utf-8"?>?
  
  

<Day3:DMMainAS?xmlns:fx="http://ns.adobe.com/mxml/2009"? ?

  
  

???????????????xmlns:s="library://ns.adobe.com/flex/spark"? ?

  
  

???????????????xmlns:mx="library://ns.adobe.com/flex/mx"?xmlns:Day3="Day3.*"?>?

  
  

????<fx:Declarations>?

  
  

????????<!--?将非可视元素（例如服务、值对象）放在此处?-->?

  
  

????</fx:Declarations>?

  
  
<mx:VBox>
  
  

????<mx:ToggleButtonBar?dataProvider="viewstack">?

  
  

????</mx:ToggleButtonBar>?

  
  

????<mx:ViewStack?id="viewstack">?

  
  

????????<mx:VBox?label="First">?

  
  

????????????<s:Button?label="按钮1111"/>?

  
  

??????? </mx:VBox>?

  
  

????????<mx:VBox?label="Second">?

  
  

????????????<s:Button?label="按钮2222"/>?

  
  

????????</mx:VBox>?

  
  

????????<mx:VBox?label="Third">?

  
  

????????????<s:Button?label="按钮3333"/>?

  
  
 </mx:VBox>?
  
  

 </mx:ViewStack>?

  
  
</mx:VBox>
  
  

</Day3:DMMainAS>?

 
 

?运行效果：

?

?

?以上 viewstack的两种基本用法 学习ING....