3.2.通过百分比方式配置容器的布局和尺寸
3.2.1 问题
需要根据父亲控件的尺寸来设置子组件们的尺寸。
3.2.2 解决办法
使用百分比设置尺寸的时候，当控件的尺寸变化时，Flex 框架会自动调整它的子组件的尺寸。
3.2.3 讨论
百分比布局方式是一种强大工具，可以让你轻松地定义一个子组件的尺寸和位置，同时兼顾其父亲容器。例如，下面的RelativePositioningChild.mxml 组件就把自己的宽度设置为其父组件宽度的40%，高度为其父组件高度的70%。
在下面的这个例子当中，多个RelativePositioningChild 的实例被放进一个同样是百分比尺寸的父亲容器中。如果我们把这个父亲容器以及它所有的子组件放在一起看作一个组合起来的控件的话。那么，无论这个组合控件被添加到什么父亲里面去，这个组合控件的宽和高都由它的父亲来决定，从而也决定了组合控件内子组件的宽和高。
要示范百分比尺寸方式下大小的调整，将前面的代码段保存为RelativePositioningParent.mxml 文件。然后像下面这样使用之：
当滑块控件改变应用的宽度时，RelativePositioningParent 和RelativePositioningChild
即会根据父亲应用的宽度来调整它们自己的宽度。
需要根据父亲控件的尺寸来设置子组件们的尺寸。
3.2.2 解决办法
使用百分比设置尺寸的时候，当控件的尺寸变化时，Flex 框架会自动调整它的子组件的尺寸。
3.2.3 讨论
百分比布局方式是一种强大工具，可以让你轻松地定义一个子组件的尺寸和位置，同时兼顾其父亲容器。例如，下面的RelativePositioningChild.mxml 组件就把自己的宽度设置为其父组件宽度的40%，高度为其父组件高度的70%。
+展开
-XML
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="40%"
height="70%" backgroundColor="#0033ff">
<mx:Image source="@Embed('../../assets/image.png')"/>
<mx:Image source="@Embed('../../assets/image.png')"/>
</mx:VBox>
height="70%" backgroundColor="#0033ff">
<mx:Image source="@Embed('../../assets/image.png')"/>
<mx:Image source="@Embed('../../assets/image.png')"/>
</mx:VBox>
在下面的这个例子当中，多个RelativePositioningChild 的实例被放进一个同样是百分比尺寸的父亲容器中。如果我们把这个父亲容器以及它所有的子组件放在一起看作一个组合起来的控件的话。那么，无论这个组合控件被添加到什么父亲里面去，这个组合控件的宽和高都由它的父亲来决定，从而也决定了组合控件内子组件的宽和高。
+展开
-XML
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="75%"
height="50%" backgroundColor="#0099ff" alpha="0.3"
xmlns:cookbook="oreilly.cookbook.*">
<cookbook:RelativePositioningChild/>
<cookbook:RelativePositioningChild/>
</mx:HBox>
height="50%" backgroundColor="#0099ff" alpha="0.3"
xmlns:cookbook="oreilly.cookbook.*">
<cookbook:RelativePositioningChild/>
<cookbook:RelativePositioningChild/>
</mx:HBox>
要示范百分比尺寸方式下大小的调整，将前面的代码段保存为RelativePositioningParent.mxml 文件。然后像下面这样使用之：
+展开
-XML
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" xmlns:cookbook="oreilly.cookbook.*">
<mx:Script>
<![CDATA[
private function changeWidth():void
{
this.width = slider.value*150;
}
]]>
</mx:Script>
<cookbook:RelativePositioningParent/>
<mx:HSlider id="slider" change="changeWidth()"/>
</mx:Application>
layout="absolute" xmlns:cookbook="oreilly.cookbook.*">
<mx:Script>
<![CDATA[
private function changeWidth():void
{
this.width = slider.value*150;
}
]]>
</mx:Script>
<cookbook:RelativePositioningParent/>
<mx:HSlider id="slider" change="changeWidth()"/>
</mx:Application>
当滑块控件改变应用的宽度时，RelativePositioningParent 和RelativePositioningChild
即会根据父亲应用的宽度来调整它们自己的宽度。
加支付宝好友偷能量挖...
