flex父子页面数据交互实现（回调函数）

左手的ㄟ右手 2022-06-02 02:16 183阅读 0赞

在网上看到一个父子页面数据交互的例子，自己也写了写。

首先父页面test.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"
    			   >
    	
    	<fx:Script>
    		<![CDATA[
    			import mx.controls.Alert;
    			import mx.managers.PopUpManager;
    			
    			[Bindable]
    			public var testForm:TestForm = new TestForm;
    			
    			//等会将该方法赋给子页面定义的一个方法变量myCallBack
    			public function callBack(obj:Object):void{
    				showLable.text = obj.name;
    			}
    			
    			public function jump():void{
    				//弹出子页面
    				PopUpManager.addPopUp(testForm,this,false);
    				//给子页面的方法变量赋为父页面的方法
    				testForm.myCallBack = this.callBack;
    				//新建对象并给属性赋值
    				var obj:Object = new Object;
    				obj.name = valueText.text;
    				//直接调用子页面的方法将父页面的数据当参数传过去
    				testForm.initPage(obj);
    			}
    		]]>
    	</fx:Script>
    	<s:VGroup horizontalAlign="center" verticalAlign="middle" width="80%" height="200">
    		<s:Label text="我是父页面，子页面传过来的值为："/>
    		<s:Label id = "showLable"/>
    		<s:TextInput id="valueText"/>
    		<s:Button label="点击将值传递到子页面" click="jump()"/>
    	</s:VGroup>
    </s:Application>

子页面TestForm.mxml

<?xml version="1.0" encoding="utf-8"?>
    <s:TitleWindow 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="400" minHeight="200"
    			   title="子页面"
    			   close="close()"
    			   >
    	<fx:Script>
    		<![CDATA[
    			import mx.managers.PopUpManager;
    			
    			import spark.components.PopUpAnchor;
    			public var myCallBack:Function;//定义的方法变量
    			public var mainApp:Object = null;//格式需要这样 直接赋值null，有意向可深究一下
    			
    			public function initPage(obj:Object):void{
    				showLabel.text = obj.name;
    			}
    			public function goBack():void{
    				//新建对象并赋值 传给子页面
    				var obj:Object = new Object;
    				obj.name = valueText.text;
    				//调用方法，并将对象参数传过去
    				myCallBack.call(mainApp,obj);
    			}
    			//关闭
    			public function close():void{
    				PopUpManager.removePopUp(this);
    			}
    			
    		]]>
    	</fx:Script>
    	<s:VGroup horizontalAlign="center" verticalAlign="middle" width="80%" height="200">
    		<s:Label text="我是子页面,父页面传过来的值为："/>
    		<s:Label id="showLabel" />
    		<s:TextInput id="valueText"/>
    		<s:Button label="点击将值传递到父页面" click="goBack()"/>
    	</s:VGroup>
    </s:TitleWindow>

这样父子页面就可以数据交互了。附上截图

![1345565194_1598.jpg][]

这样写其实就是使用了闭包传递值了，但是这样会引起内存泄漏问题，可以想想在子页面封装好的obj传到了父页面，这样它的周期就与父页面绑在一起了，那他占用的内存啥时候释放啊~父页面销毁的时候？如果父页面是主页啥的那就。。。

[1345565194_1598.jpg]: https://img-my.csdn.net/uploads/201208/22/1345565194_1598.jpg