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>

 

 

效果如图所示