3.5.对容器使用基于约束的布局
3.5.1 问题
需要在父组件的内边界基础上来定义子组件的尺寸。
3.5.2 解决办法
使用约束性属性：left, right, top, and bottom.
3.5.3 讨论
UIComponent 类的约束性属性允许为组件定义制约于父组件装订线的宽度和高度。一个宽度为200 像素的组件，如果它的子组件的left 和right 属性均为20 像素，则该子组件的宽度将为160 像素。同样，高度为200 像素的组件的子组件如果bottom 属性为40 像素，则会被局限在160 像素内。约束不会被应用到没有绝对布局的组件中去，例如Hbox 或Vbox 组件。
子组件能够使用约束型属性的容器有Canvas、Panel 和Application.
在下面的例子里，内部Canvas 组件将距离外部Canvas 的顶部、左边和右边20 像素，底部延伸50 像素处放置，这样就使得内部Canvas 变成360 像素宽，230 像素高。如果外部Canvas扩大或收缩，内部Canvas 仍然保持在所有方向上相同的装订线距离。组件内的Button 和TextInput 控件将根据内部Canvas 的尺寸，同时保持自身约束性属性制定的装订线距离。
在下面的代码段中，由于应用到面板的约束性属性的原因，两个Panel 组件的宽度都将是320像素。顶部的Panel 将根据top 制约置于40 像素处，同样底部的Panel 将根据bottom 制约置于260 像素处。
需要在父组件的内边界基础上来定义子组件的尺寸。
3.5.2 解决办法
使用约束性属性：left, right, top, and bottom.
3.5.3 讨论
UIComponent 类的约束性属性允许为组件定义制约于父组件装订线的宽度和高度。一个宽度为200 像素的组件，如果它的子组件的left 和right 属性均为20 像素，则该子组件的宽度将为160 像素。同样，高度为200 像素的组件的子组件如果bottom 属性为40 像素，则会被局限在160 像素内。约束不会被应用到没有绝对布局的组件中去，例如Hbox 或Vbox 组件。
子组件能够使用约束型属性的容器有Canvas、Panel 和Application.
在下面的例子里，内部Canvas 组件将距离外部Canvas 的顶部、左边和右边20 像素，底部延伸50 像素处放置，这样就使得内部Canvas 变成360 像素宽，230 像素高。如果外部Canvas扩大或收缩，内部Canvas 仍然保持在所有方向上相同的装订线距离。组件内的Button 和TextInput 控件将根据内部Canvas 的尺寸，同时保持自身约束性属性制定的装订线距离。
+展开
-XML
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400"
height="300">
<mx:Canvas left="20" right="20" top="20" bottom="50"
id="innerCanvas ">
<mx:Button label="Button Label" left="20" right="20"
top="10"/>
<mx:TextInput left="30" right="30" bottom="10"/>
</mx:Canvas>
</mx:Canvas>
height="300">
<mx:Canvas left="20" right="20" top="20" bottom="50"
id="innerCanvas ">
<mx:Button label="Button Label" left="20" right="20"
top="10"/>
<mx:TextInput left="30" right="30" bottom="10"/>
</mx:Canvas>
</mx:Canvas>
在下面的代码段中，由于应用到面板的约束性属性的原因，两个Panel 组件的宽度都将是320像素。顶部的Panel 将根据top 制约置于40 像素处，同样底部的Panel 将根据bottom 制约置于260 像素处。
+展开
-XML
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400"
height="300">
<mx:Panel left="40" right="40" top="40" id="topPanel ">
<mx:Label text="Label text"/>
</mx:Panel>
<mx:Panel left="40" right="40" bottom="40" id="bottomPanel">
<mx:Label text="Label text"/>
</mx:Panel>
</mx:Canvas>
height="300">
<mx:Panel left="40" right="40" top="40" id="topPanel ">
<mx:Label text="Label text"/>
</mx:Panel>
<mx:Panel left="40" right="40" bottom="40" id="bottomPanel">
<mx:Label text="Label text"/>
</mx:Panel>
</mx:Canvas>
加支付宝好友偷能量挖...
