本文和大家重點(diǎn)討論一下Flex Panel控件內(nèi)部容器大小計(jì)算方法，F(xiàn)lex Panel控件是一個(gè)很特殊的容器控件，并且Flex Panel控件的width屬性和height屬性都是包括邊框的。

Flex Panel控件內(nèi)部容器大小計(jì)算方法

Flex Panel控件是一個(gè)很特殊的容器控件。這個(gè)控件看起來就像是一個(gè)窗口，因?yàn)樗袠?biāo)題欄還有邊框。而實(shí)際的使用面積就是內(nèi)部白色的部分。而Flex Panel控件的width屬性和

height屬性都是包括邊框的。有的時(shí)候我們需要準(zhǔn)確的知道內(nèi)部容器的大小。在沒有什么好辦法的情況下，只能一點(diǎn)一點(diǎn)試，試出邊框的大小，非常的麻煩，而且當(dāng)Panel控件的

style發(fā)生改變后，有可能邊框的寬度還會發(fā)生改變。有什么辦法能夠準(zhǔn)確的知道邊框的大小呢。
幸好一個(gè)偶然的機(jī)會發(fā)現(xiàn)了Flex Panel控件的一個(gè)屬性viewMetrics，這個(gè)屬性是一個(gè)EdgeMetrics對象，這個(gè)對象中有四個(gè)屬性left、right、top、bottom，這個(gè)四個(gè)屬性保存了上下左

右邊框的值。根據(jù)這四個(gè)值就很容易得到Panel容器內(nèi)部有效部分的大小了。

這有一個(gè)小例子：
 

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> 

在這個(gè)例子中，按下ShowPicture按鈕，向Flex Panel控件中添加了一個(gè)圖片，如果不改變Panel大小的話，就出現(xiàn)滾動條，圖片顯示不完整。

接下來按下ResizePanel這個(gè)按鈕調(diào)整Panel的大小，在例子中使用viewMetrics屬性動態(tài)調(diào)整了Flex Panel控件的大小。
這樣整個(gè)圖片就顯示完整了。

【編輯推薦】

1. 技術(shù)分享 用FlexBuilder創(chuàng)建Flex項(xiàng)目
2. 開源Flex組件FlexReport使用指南
3. 解析Flex事件執(zhí)行流程
4. FlexBuilder3.0與Eclipse3.4的完美結(jié)合
5. 學(xué)習(xí)筆記 FlexBuilder2.0中如何使用基于Lists的控件