flex4.5使用viewstack实现页面跳转

创建一个flex项目，主页面为main.mxml放在默认包下，和三个Canvas组件（放在component包下），代码如下：

main.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:component="component.*">
    <fx:Declarations>
        <!-- 将非可视元素（例如服务、值对象）放在此处 -->
    </fx:Declarations>
    <mx:ViewStack id = "pageStores">
        <component:login id="login">
        </component:login>
        <component:welcome id="welcome" width="331" height="226">
        </component:welcome>
        <component:mainframe id="mainframe" width="398" height="304">    
        </component:mainframe>
    </mx:ViewStack>
</s:Application>

login.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="304"
    creationComplete="init()" >
    <fx:Declarations>
        <!-- 将非可视元素（例如服务、值对象）放在此处 -->
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import mx.containers.ViewStack;
            import mx.controls.Alert;
            private var vs:ViewStack; 　　　　//vs是main.mxml中定义的viewstack
            private function init():void
            {
                vs = this.parent as ViewStack;   //初始login的时候获得main.mxml中的viewstack，即pagestores（它的id），记住，要在login.mxml中加
                　　　　　　　　　　　　　　　　　　　　  //入：creationComplete="init()
            }
            private function getChild(str:String):Object  //这段代码是为了获得指定页面对应的对象
            {
                for each(var obj in vs.getChildren())  //遍历vs中的所有子组件(即所有页面)，页面不会太多，顶多一二十个，所以这个方法不会太耗时
                {
                    if(obj.name === str) //如果是想找的页面，就返回这个对象。比如想找到welcome.mxml，则令str="welcome"
                    {
                        break;
                    }
                }
                return obj;
            }
            private function btnClick(event:Event):void　　　　//确定按钮的响应
            {
                var obj:Object = getChild("welcome");          //找到想要显示的对象
                if(username.text == "admin" && password.text == "admin") //如果用户名与密码正确
                {               
                    vs.selectedChild = obj as mx.containers.Canvas;　　　　//将welcome作为显示的页面，即实现了页面的跳转
                }
                else
                {
                    mx.controls.Alert.show("用户名或者密码错误！","ERROR!");
                }           
            }
            private function btnClick1(event:Event):void{
                var obj:Object=getChild("mainframe");
                vs.selectedChild = obj as mx.containers.Canvas;
            }
            protected function button1_clickHandler(event:MouseEvent):void
            {
                // TODO Auto-generated method stub
                btnClick(event);
            }
            
            protected function button2_clickHandler(event:MouseEvent):void
            {
                // TODO Auto-generated method stub
                btnClick1(event);
            }
            
        ]]>
    </fx:Script>
    <s:Panel x="24" y="29" width="366" height="265" title="登录">
        <s:TextInput x="107" y="31" id="username" toolTip="用户名"/>
        <s:TextInput x="108" y="81" id="password" toolTip="密码"/>
        <s:Label x="49" y="32" width="43" height="20" text="用户名"/>
        <s:Label x="53" y="81" width="43" height="20" text="密码"/>
        <s:Button x="200" y="121" label="登录" click="button1_clickHandler(event)"/>
        <s:Button x="200" y="175" label="主窗体" click="button2_clickHandler(event)"/>
    </s:Panel>
</mx:Canvas>
welcome.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:fx="http://ns.adobe.com/mxml/2009"
           xmlns:s="library://ns.adobe.com/flex/spark"
           xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300">
    <fx:Declarations>
        <!-- 将非可视元素（例如服务、值对象）放在此处 -->
    </fx:Declarations>
    <s:Label x="39" y="29" text="登录成功"/>
</mx:Canvas>
mainframe.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:fx="http://ns.adobe.com/mxml/2009"
           xmlns:s="library://ns.adobe.com/flex/spark"
           xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300"
            creationComplete="init()">
    
    <fx:Script>
        <![CDATA[
            import mx.containers.ViewStack;
            private var vs:ViewStack;
            private function init():void{
                vs=this.parent as ViewStack;
            }
            private function getChild(str:String):Object{
                for each(var obj in vs.getChildren()){
                    if(obj.name===str){
                        break;
                    }
                }
                return obj;
            }
            private function btnClick(event:Event):void{
                var obj:Object=getChild("login");
                vs.selectedChild= obj as mx.containers.Canvas;
            }
            protected function button1_clickHandler(event:MouseEvent):void
            {
                // TODO Auto-generated method stub
                btnClick(event);
            }
        ]]>
    </fx:Script>
    
    <fx:Declarations>
        <!-- 将非可视元素（例如服务、值对象）放在此处 -->
    </fx:Declarations>
    <mx:AdvancedDataGrid id="adg1" x="27" y="44" designViewDataType="flat">
        <mx:columns>
            <mx:AdvancedDataGridColumn dataField="col1" headerText="列 1"/>
            <mx:AdvancedDataGridColumn dataField="col2" headerText="列 2"/>
            <mx:AdvancedDataGridColumn dataField="col3" headerText="列 3"/>
        </mx:columns>
    </mx:AdvancedDataGrid>
    <s:Button x="185" y="263" label="返回登录页面" click="button1_clickHandler(event)"/>
</mx:Canvas>

本人QQ：735900995，谢谢指导