学习笔记 Flex Panel控件内部容器大小计算方法

学习笔记 Flex Panel控件内部容器大小计算方法

2010-08-04 15:01 To9m csdn.net 我要评论(0) 字号：T | T

Flex Panel控件内部容器大小计算方法你是否了解，这里和大家分享一下，Flex Panel控件是一个很特殊的容器控件。这个控件看起来就像是一个窗口，因为它有标题栏还有边框。

AD：

本文和大家重点讨论一下Flex Panel控件内部容器大小计算方法，Flex Panel控件是一个很特殊的容器控件，并且Flex Panel控件的width属性和height属性都是包括边框的。

Flex Panel控件内部容器大小计算方法

Flex Panel控件是一个很特殊的容器控件。这个控件看起来就像是一个窗口，因为它有标题栏还有边框。而实际的使用面积就是内部白色的部分。而Flex Panel控件的width属性和

height属性都是包括边框的。有的时候我们需要准确的知道内部容器的大小。在没有什么好办法的情况下，只能一点一点试，试出边框的大小，非常的麻烦，而且当Panel控件的

style发生改变后，有可能边框的宽度还会发生改变。有什么办法能够准确的知道边框的大小呢。
幸好一个偶然的机会发现了Flex Panel控件的一个属性viewMetrics，这个属性是一个EdgeMetrics对象，这个对象中有四个属性left、right、top、bottom，这个四个属性保存了上下左

右边框的值。根据这四个值就很容易得到Panel容器内部有效部分的大小了。

这有一个小例子：
 

viewplaincopytoclipboardprint?
<?xmlversionxmlversion="1.0"encoding="utf-8"?>
<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:Script>
<!--[CDATA[
importmx.events.FlexEvent;
importmx.controls.Image;
privatevarimg:Image;
privatefunctiononClick():void
{
img=newImage();
img.source="Image.PNG";
panel.addChild(img);
}
privatefunctiononClick2():void
{
panel.width=img.width+panel.viewMetrics.left+panel.
viewMetrics.right;
panel.height=img.height+panel.viewMetrics.top+panel.
viewMetrics.bottom;
}
]]-->
</mx:Script>
<mx:Panelidmx:Panelid="panel"x="133"y="98"width="398"height="360"
layout="absolute">
</mx:Panel>
<mx:Buttonxmx:Buttonx="133"y="52"label="ShowPicture"
click="onClick()"/>
<mx:Buttonxmx:Buttonx="362"y="52"label="ResizePanel"
click="onClick2()"/>
</mx:Application>
<?xmlversionxmlversion="1.0"encoding="utf-8"?>
<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">
 <mx:Script>
  <!--[CDATA[
   importmx.events.FlexEvent;
   importmx.controls.Image;
   privatevarimg:Image;
   privatefunctiononClick():void
   {
    img=newImage();
    img.source="Image.PNG";
    panel.addChild(img);
   }
   privatefunctiononClick2():void
   {
    panel.width=img.width+panel.viewMetrics.left+panel.
viewMetrics.right;
    panel.height=img.height+panel.viewMetrics.top+panel.
viewMetrics.bottom;
   }
  ]]-->
 </mx:Script>
 <mx:Panelidmx:Panelid="panel"x="133"y="98"width="398"height="360"
layout="absolute">
 </mx:Panel>
 <mx:Buttonxmx:Buttonx="133"y="52"label="ShowPicture"
click="onClick()"/>
 <mx:Buttonxmx:Buttonx="362"y="52"label="ResizePanel"
click="onClick2()"/>
</mx:Application>

在这个例子中，按下ShowPicture按钮，向Flex Panel控件中添加了一个图片，如果不改变Panel大小的话，就出现滚动条，图片显示不完整。

接下来按下ResizePanel这个按钮调整Panel的大小，在例子中使用viewMetrics属性动态调整了Flex Panel控件的大小。
这样整个图片就显示完整了。