学步园

flex：3.0

本篇blog参考：http://blog.minidx.com/2008/08/02/1208.html、http://blog.minidx.com/2008/10/04/1473.html

写这篇博客主要是因为这两天做的东西涉及到了flex中的visible和includeinlayer属性，通过这两个属性可以重新布局页面，达到动态布局的效果，但是自己在做的时候，设置这两个属性的时候老是有问题，可能是和其他东西冲突吧，不过写了一个简单的进行测试，就很容易通过了。下面给出代码和效果：

效果1：（参考链接1，这个不是通过visible和includeinlayer属性设置的）

原始页面：

点击show，出现下面的界面（直接上拉填充页面）：

代码如下：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:transitions>
        <mx:Transition fromState="*" toState="*">
            <mx:Parallel targets="{[vbox2]}">
                <mx:WipeDown />
                <mx:Fade />
            </mx:Parallel>
        </mx:Transition>
    </mx:transitions>
 
    <mx:states>
        <mx:State name="expanded">
            <mx:AddChild relativeTo="{vbox3}" position="after">
                <mx:VBox id="vbox2"
                        width="100%"
                        height="100%"
                        backgroundColor="haloGreen" textAlign="center">
                    <mx:DataGrid id="bId" dataProvider="{arr_my}"  width="100%" height="100%" doubleClickEnabled="true" showHeaders="true" >
						<mx:columns>
							<mx:DataGridColumn headerText="bbb Text" dataField="bbb" /> 
						</mx:columns> 
					</mx:DataGrid>
                </mx:VBox>
            </mx:AddChild>
        </mx:State>
    </mx:states>
 
    <mx:Style>
        VBox {
            paddingLeft: 10;
            paddingRight: 10;
            paddingTop: 10;
            paddingBottom: 10;
        }
    </mx:Style>
 
    <mx:Script>
        <![CDATA[
        	import mx.collections.ArrayCollection;
            import mx.effects.easing.*;
 
           
            private var helpIcon:Class;
 
            private function toggleExpanded():void {
                switch (currentState) {
                    case "expanded":
                        currentState = "";
                        break;
                    default:
                        currentState = "expanded";
                        break;
                }
            }
            [Bindable]
            private var arr_my:ArrayCollection=new ArrayCollection([
            	{aaa:"aaa",bbb:"bbb"},
				{aaa:"a1aa",bbb:"1bbb"},
				{aaa:"aaa2",bbb:"bbb2"}            	
            ]);
        ]]>
    </mx:Script>
 
    <mx:VBox width="100%" height="100%">
        <mx:VBox id="vbox1"
                width="100%"
                height="50"
                 textAlign="center">
            <mx:HBox>
	            <mx:Label text="测试上拉窗口示例" />
	            <mx:Button label="show" click="toggleExpanded()" />
       		 </mx:HBox>
        </mx:VBox>
 
        <mx:VBox id="vbox3"
                width="100%"
                height="100%"
                backgroundColor="haloBlue"
                 textAlign="center">
            <mx:DataGrid id="aId" dataProvider="{arr_my}"  width="100%" height="100%" doubleClickEnabled="true" showHeaders="true" >
				<mx:columns>
					<mx:DataGridColumn headerText="aaa Text" dataField="aaa" /> 
				</mx:columns> 
			</mx:DataGrid>
        </mx:VBox>
    </mx:VBox>
 
</mx:Application>

效果二，（参考链接2，这个是通过visible和includeinlayer属性设置的）

原始页面：

点击show，得到：

原始代码如下：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Script>
		<![CDATA[
		import mx.collections.ArrayCollection;
		import mx.controls.Alert;
			 [Bindable]
            private var arr_my:ArrayCollection=new ArrayCollection([
            	{aaa:"aaa",bbb:"bbb"},
				{aaa:"a1aa",bbb:"1bbb"},
				{aaa:"aaa2",bbb:"bbb2"}            	
            ]);
            [Bindable]
            private var flag:Boolean =false;
            private function la():void{
            //	Alert.show("ahh");
            	if(!flag){
	            	flag=!flag;
    	        }else{
    	        	flag=!flag;
    	        	
    	        }
            }
		]]>
	</mx:Script>
	<mx:VBox x="100" y="100" width="500" height="500" backgroundColor="white">
		<mx:HBox width="100%" height="40">
			<mx:Label text="测试上拉界面" />
			<mx:Button label="show" click="la()" />
		</mx:HBox>	
		<mx:VBox width="100%" height="100%">
			
			<mx:DataGrid id="aId" dataProvider="{arr_my}"  width="100%" height="100%" doubleClickEnabled="true" showHeaders="true" >
				<mx:columns>
					<mx:DataGridColumn headerText="aaa Text" dataField="aaa" /> 
				</mx:columns> 
			</mx:DataGrid>
			<mx:DataGrid id="bId" dataProvider="{arr_my}"  width="100%" height="100%" doubleClickEnabled="true" showHeaders="true" visible="{flag}" includeInLayout="{flag}">
				<mx:columns>
					<mx:DataGridColumn headerText="bbb Text" dataField="bbb" /> 
				</mx:columns> 
			</mx:DataGrid>
			
		</mx:VBox>
		
	</mx:VBox>
</mx:Application>

如果您觉得lz的blog或者资源还ok的话，可以选择给lz投一票，多谢。（投票地址：http://vote.blog.csdn.net/blogstaritem/blogstar2013/fansy1990 ）

分享，成长，快乐

转载请注明blog地址：http://blog.csdn.net/fansy1990