1.管理程序的布局
容器累组件都位于mx.containers包中。Container类是UIComponent的子类,是所有Flex容器类的父类,每个容器类都在它的基础上添加自己的功能。
 
1.1控制Application 的布局
Application 是一个特殊的容器,位于界面元素的根部,包含了整个程序的所有元素。
layout :
    值为absolute时,horizontalAlign水平对齐和verticalAlign垂直对齐不起作用,界面上的元素将由各自的坐标决定。
 
 
    值为vertical 或 horizontal时,元素的位置由horizontalAlign和verticalAlign控制。
 
width 长, height 高。决定SWF文件的尺寸。
 
我们可以设置如下的属性,所有组件公有:
horizontalGap 水平间距
vericalGap 垂直间距
paddingTop 顶部边距
paddingLeft 左边距
paddingRight 右边距
paddingBottom 底边距
 
Constraint layout 约束布局,只能在layout属性值为absolute才能使用,具有这一特性的容器有:Application、Canvas、Panel和Panel的子类TitleWingdow
点击元素得到如下界面:
 
 
如果对某一组件使用了约束布局,它会被强制定位在相应的位置,设置的X,Y坐标会失效。
 
ApplicationContolBar是和Application相关的一个容器,通常用来提供全局导航。有水平(默认)和垂直方向选择。它的dock属性,表示是否强行停靠在Application的顶部。默认false,被当作一个普通的组件。true,始终在顶部,宽度为100%。
Xml代码 复制代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"    
  3. layout="absolute" horizontalAlign="left" verticalAlign="top" height="100%" width="100%"  
  4.  horizontalGap="0" verticalGap="0" paddingTop="0">     
  5.     <mx:Button label="Button1" height="120" x="24" y="0"/>  
  6.     <mx:Button label="Button2" top="0" bottom="30" width="72" horizontalCenter="-72"/>  
  7.     <mx:Button label="Button3" width="240" x="168" y="0"/>  
  8.     <mx:ApplicationControlBar dock="true">  
  9.         <mx:Label text="这里是顶部导航" width="93" height="20"/>  
  10.     </mx:ApplicationControlBar>  
  11. </mx:Application>  
 
 
1.2 Canvas
Canvas 直接继承自Container,体积小,使用灵活。在它里面的元素只能由X,Y来定位。如果元素超出 Canvas 的区域范围, Canvas 会自动增加滚动条。每个容器默认情况下都会自动带滚动条。可以通过horizontalScrollPolicy和 verticalScrollPolicy 的属性值来控制,on/off/auto。在AS中对应ScrollPolicy.ON, ScrollPolicy.OFF, ScrollPolicy.AUTO
 
1.3 VBox 和 HBox
VBox 和 HBox 都是Box的子类,和Canvas相比,Box对子级元素采取规则的布局方式,其中VBox内的元素垂直方向分布,而HBox水平方向分布。通过horizontalAlign和verticalAlign控制容器内的元素对齐方式。
Xml代码 复制代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">  
  3.     <mx:HBox x="27" y="30" width="50%" height="50%" horizontalAlign="left"    
  4.             verticalAlign="middle">  
  5.         <mx:Button label="Button"/>  
  6.         <mx:Label text="这是一个HBox"/>  
  7.     </mx:HBox>  
  8.     <mx:VBox width="50%" x="263" y="30" height="100%">  
  9.         <mx:Label text="这是一个VBox"/>  
  10.         <mx:Button label="Button"/>  
  11.     </mx:VBox>       
  12. </mx:Application>  
 
1.4 用DividedBox分割界面
DividedBox继承自Box类,它有两个子类:HDividedBox和VDividedBox。类似于HBox和VBox,多了在子级元素之间增加了可以拖动的分割块。拖动分割块可以动态的调整分割块附近元素的长宽。
borderStyle是组件的样式之一,表示边框样式,默认:none,表示无边框。solid为实心线条。
liveDragging:true 表示在拖动时,在松开鼠标后,调整位置。false 拖动时调整。
Xml代码 复制代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">  
  3.     <mx:HDividedBox width="90%" height="90%" liveDragging="false" borderStyle="solid"  
  4.             x="10" y="10">  
  5.         <mx:Canvas width="200" height="246">  
  6.             <mx:Label x="33" y="10" text="一个Canvas容器"/>          
  7.         </mx:Canvas>  
  8.         <mx:HBox width="50%" height="50%">  
  9.             <mx:Label text="HBox容器" width="140"/>  
  10.             <mx:HBox width="50%" height="50%">  
  11.                 <mx:Label text="HBox内的HBox" width="140"/>  
  12.             </mx:HBox>  
  13.         </mx:HBox>  
  14.     </mx:HDividedBox>  
  15. </mx:Application>