3.2 根据比例设定对象的位置和尺寸
3.2.1 问题
你需要依据其父控件的尺寸来确定子对象的大小。
3.2.2 解答
用百分比调整尺寸,这样如果组件的尺寸变了,Flex框架会自动调整它的子对象的大小。
3.2.3 讨论
百分比布局是强有力的工具,它可以让你很容易地根据父对象来确定子对象的大小和位置。例如,如下的RelativePositioningChild.mxml组件按照父对象的宽的40%和高的70%来布局。
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="40%" height="70%" background
Color="#0033ff">
<mx:Image source="@Embed('../../assets/image.png')"/>
<mx:Image source="@Embed('../../assets/image.png')"/>
</mx:VBox>
在下面的例子中,RelativePositioningChild的多个实例放到了一个父容器里,这个容器也是按比例确定尺寸的。无论它被添加到哪个容器,这个父容器将决定它的大小,进而决定它的子对象的大小。
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="75%" height="50%" background
Color="#0099ff" alpha="0.3" xmlns:cookbook="oreilly.cookbook.*">
<cookbook:RelativePositioningChild/>
<cookbook:RelativePositioningChild/>
</mx:HBox>
为了说明比例尺寸的效果,上面的程序片段被保存为RelativePositioningParent.mxml,并在下面使用:<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>
当滑块改变应用的宽度时,RelativePositioningParent和RelativePositioningChild根据它们的父对象重新确定自己的大小和位置。