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: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:ViewStack>

Day3:DMMainAS>

 运行效果：

 

     

 

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