Box ,Dividebox,Panel 、canvas布局组件的应用

     HBOX 和VBOX分别用来水平方向自动排列和垂直方向自动排列布局，不会出现组件间的相互覆盖，当本身的尺寸不能满足子组件的大小时，会自动的支持滚动条组件。

 

 

HBox和VBox是Box的子类，HBox为水平分布，VBox为垂直分布。Box通过设置direction的属性，可以达到HBox，或者VBox的效果。Box的direction="horizontal"，相当于HBox    ；Box的direction="vertical"，相当于VBox

 <?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"><mx:Panel x="153" y="19" width="496" height="373" layout="absolute" title="Box示例：" fontSize="15"><mx:Label x="19" y="10" text="Box Cantainer" width="370" height="21" color="#1C7183"/><mx:Box x="19" y="39" width="447" height="253"> <mx:Box direction="horizontal" borderStyle="solid" width="381" height="29"> <mx:Label text="box的direction=horizontal"/> </mx:Box> <mx:Box direction="vertical" borderStyle="solid" width="212" height="131"> <mx:Label text="box的direction=vertical"/> </mx:Box> </mx:Box> </mx:Panel></mx:Application>

效果如图所示：

 

 

 

 

 

 

Dividebox  类布局组件

  包含HDividebox 和VDividebox 水平分割和垂直分割组件，可以用于指定方向的排列布局，与BOX组件的区别

在于在进行排列布局时组件之间插入分隔标记，通过拖动分割标记，可以动态的调整布局的位置大小。

 

 <?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"><mx:Panel x="146" y="45" width="530" height="367" layout="absolute" title="Dividebox Example" fontSize="12"><mx:DividedBox width="156" height="307" x="10" y="8"><mx:VBox width="155" height="315"><mx:Button label="下载资料" height="31" width="126"/><mx:Button label="插入图片" height="35" width="123"/><mx:Button label="上传文件" height="37" width="125"/></mx:VBox></mx:DividedBox><mx:DividedBox x="174" y="10" width="326" height="289"><mx:TextArea width="300" height="232" text="编辑区"/><mx:Label text="编辑状态" width="73" height="84" color="#2F1FCF"/></mx:DividedBox></mx:Panel></mx:Application>

 

 

效果如图所示：

 

 

 

 

 

 

 

 

 

 

Panel组件：

 

 

 

Panle组件主要应用于定制用户界面容器,增强界面组件布局,其内部可以放置其他组件来定制更加丰富的用户交互界面。panel包含标题栏、标题内容、状态信息，边框和内容区域。panel组件的layout可以显示三种不同的布局方式，分别为垂直（默认状态）、水平和绝对定位布局

 

 

 

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#E7C8F0, #E7C8F0]"><mx:Script><!--[CDATA[public function showmessage():void{txt.text="高度"+panel.height+"/n"+ "状态"+panel.status+"/n"+ "宽度"+panel.width+"/n"+ "标题："+panel.title;}]]--></mx:Script><mx:Panel x="139" y="32" id="panel" width="397" height="310" layout="absolute" status="active" title="panel example" fontSize="12" borderColor="#6F96F0"><mx:TextArea x="10" y="39" width="323" height="173" id="txt"/><mx:Button x="48" y="220" label="按钮" click="showmessage();"/></mx:Panel></mx:Application>

 

 

 

 

效果如图所示：

 

 

 

 

 canvas

可以放置任何一种组件，活着IO控制组件。

 

代码如下：

 

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"><mx:Panel x="133" y="48" width="438" height="370" layout="absolute"><mx:Label x="10" y="10" text="使用绝对坐标放置子容器的位置。" width="368" height="18" fontSize="12"/><mx:Canvas x="10" y="36" width="396" height="235"><mx:TextInput x="60" y="10" width="115" height="20"/><mx:TextInput x="93" y="27" width="115" height="21"/><mx:TextInput x="120" y="47" width="126" height="20"/><mx:VBox x="181" y="66" width="89" height="72" backgroundColor="#D43333"></mx:VBox><mx:VBox x="224" y="106" width="89" height="64" backgroundColor="#366FD7"></mx:VBox><mx:VBox width="86" height="64" backgroundColor="#D646A5" y="153" x="270"></mx:VBox><mx:Text x="10" y="129" text="画 布 容 器 中 一 些 组 件 的 放 置 。" width="322" height="27" fontSize="14"/></mx:Canvas></mx:Panel></mx:Application>

 

 

效果如图所示