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，谢谢指导