学习笔记 Flex Panel控件内部容器大小计算方法-panel中的控件自适应大小

本文和大家重点讨论一下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控件的大小。
这样整个图片就显示完整了。

【编辑推荐】