本文和大家重點討論一下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控件的大小。
這樣整個圖片就顯示完整了。

【編輯推薦】

1. 技術分享 用FlexBuilder創建Flex項目
2. 開源Flex組件FlexReport使用指南
3. 解析Flex事件執行流程
4. FlexBuilder3.0與Eclipse3.4的完美結合
5. 學習筆記 FlexBuilder2.0中如何使用基于Lists的控件