划分flex页面布局

flex常用的页面布局方式主要分为4种:

一、垂直拆分结构

 

二、嵌套层次结构

 

三、水平拆分结构

 

四、目录结构

 

例如：垂直拆分结构：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%">
	<mx:Panel width="90%" height="90%" layout="absolute" title="垂直拆分结构" fontSize="14" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="100" horizontalCenter="0" verticalCenter="0">
		<mx:HDividedBox x="0" y="0" width="100%" height="100%">
			<mx:Canvas width="30%" height="100%" backgroundColor="#FFFFCC">
				<mx:Label x="0" y="10" text="左面组件容器"/>
			</mx:Canvas>
			<mx:Canvas width="70%" height="100%" backgroundColor="#99CCFF">
				<mx:Label x="0" y="10" text="右面组件容器"/>
			</mx:Canvas>
		</mx:HDividedBox>
	</mx:Panel>
</mx:Application>

 

效果图如下所示

实际上无非就是一个Panel里放了一个HDivideBox，而HDivideBox里又放了两个Canvas组件而已。

其他的划分也都是一样的道理。。。^_^