Flex3 cookbook 翻译: 3.2 根据比例设定对象的位置和尺寸

 

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根据它们的父对象重新确定自己的大小和位置。