Flex开发中多个module之间切换，在一个module页面中切换到另外一个module

在最近的开发中，需要在代码中实现页面的是互相切换。并不需要通过Application界面进行切换，查阅了多个资料，发现实现的方法都不是简单易懂的，自己找了一下资料并研究发现，直接通过下述方法就可以直接进行module页面的切换。使用这种方法实现页面切换，页面间的值传递也相对简单。

实现方法：在一个module页面中，定义两个panel面板，也就是两个页面需要显示的内容。然后定义好每个页面panel面板的状态，定义好includeIn属性，两个页面的includeIn属性是不一样的，然后通过设定currentState来设定需要显示的是哪个页面。由于两个panel页面定义在一个module页面中，页面之间的传值简单易实现。

废话不多说，代码实现如下：

<?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">
<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.events.CloseEvent;
import mx.managers.PopUpManager;
[Bindable]

private var grid:ArrayCollection =new ArrayCollection(   //主界面显示数据
[{number:"2014010101",name:"张三",sex:"男",age:"23"},
{number:"2014010102",name:"李四",sex:"女",age:"23"},
{number:"2014010103",name:"李四",sex:"男",age:"23"},
{number:"2014010104",name:"张三",sex:"男",age:"23"},
{number:"2014010105",name:"张三",sex:"男",age:"23"},
{number:"2014010106",name:"张三",sex:"男",age:"23"},
{number:"2014010107",name:"张三",sex:"男",age:"23"},
{number:"2014010108",name:"张三",sex:"男",age:"23"}
])

<span style="color:#ff0000;">public function modify():void
{
this.currentState='downloadState';
}
public function change():void
{
this.currentState='modifyState';
}</span>
]]>
</fx:Script>
<s:Panel title="信息修改" width="100%"<span style="color:#ff0000;"> includeIn="modifyState"</span>>
<mx:VBox width="100%" height="100%" paddingBottom="10" paddingLeft="60" paddingRight="60" paddingTop="40">
<mx:DataGrid id="datagrid" dataProvider="{grid}" rowCount="{grid.length+1}" width="100%" verticalAlign="middle" textAlign="center"  allowDragSelection="true" allowMultipleSelection="true">
<mx:columns>
<mx:DataGridColumn headerText="学号" dataField="number"/>
<mx:DataGridColumn headerText="姓名" dataField="name"/>
<mx:DataGridColumn headerText="性别" dataField="sex"/>
<mx:DataGridColumn headerText="年龄" dataField="age"/>
<mx:DataGridColumn headerText="爱好" dataField="hobby"/>
</mx:columns>
</mx:DataGrid>
<mx:HBox width="100%" horizontalAlign="center" height="35" verticalAlign="middle" fontSize="12">
<s:Button id="popup" label="增加爱好信息" <span style="color:#ff0000;">click="modify()"</span>/>
</mx:HBox>
</mx:VBox>
</s:Panel>
<s:Panel title="信息下载" width="100%"<span style="color:#ff0000;"> includeIn="downloadState"</span>>
<mx:VBox width="100%" height="100%" paddingBottom="10" paddingLeft="60" paddingRight="60" paddingTop="40">
<mx:DataGrid id="datagrid1" dataProvider="{grid}" rowCount="{grid.length+1}" width="100%" verticalAlign="middle" textAlign="center"  allowDragSelection="true" allowMultipleSelection="true">
<mx:columns>
<mx:DataGridColumn headerText="学号" dataField="number"/>
<mx:DataGridColumn headerText="姓名" dataField="name"/>
<mx:DataGridColumn headerText="变化的页面" dataField="test"/>
<mx:DataGridColumn headerText="性别" dataField="sex"/>
<mx:DataGridColumn headerText="年龄" dataField="age"/>
<mx:DataGridColumn headerText="爱好" dataField="hobby"/>
</mx:columns>
</mx:DataGrid>
<mx:HBox width="100%" horizontalAlign="center" height="35" verticalAlign="middle" fontSize="12">
<s:Button id="popup1" label="增加爱好信息" <span style="color:#ff0000;">click="change()"/</span>>
</mx:HBox>
</mx:VBox>
</s:Panel>
<span style="color:#ff0000;"><s:states>
<s:State name="downloadState" />
<s:State name="modifyState" />
</s:states></span>
</s:Application>

标红的部分是现在这个功能的主要代码。通过修改this.currentState的值来确定需要显示的界面。

实现后的界面效果如下：

点击按钮之后，替换显示界面：

好的，搞定!