分享

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

 xihayouyi 2012-08-02

学习笔记 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容器内部有效部分的大小了。

这有一个小例子:
 

  1. viewplaincopytoclipboardprint?  
  2. <?xmlversionxmlversion="1.0"encoding="utf-8"?> 
  3. <mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml" 
  4. layout="absolute"> 
  5. <mx:Script> 
  6. <!--[CDATA[  
  7. importmx.events.FlexEvent;  
  8. importmx.controls.Image;  
  9. privatevarimg:Image;  
  10. privatefunctiononClick():void  
  11. {  
  12. img=newImage();  
  13. img.source="Image.PNG";  
  14. panel.addChild(img);  
  15. }  
  16. privatefunctiononClick2():void  
  17. {  
  18. panel.width=img.width+panel.viewMetrics.left+panel.  
  19. viewMetrics.right;  
  20. panel.height=img.height+panel.viewMetrics.top+panel.  
  21. viewMetrics.bottom;  
  22. }  
  23. ]]--> 
  24. </mx:Script> 
  25. <mx:Panelidmx:Panelid="panel"x="133"y="98"width="398"height="360" 
  26. layout="absolute"> 
  27. </mx:Panel> 
  28. <mx:Buttonxmx:Buttonx="133"y="52"label="ShowPicture" 
  29. click="onClick()"/> 
  30. <mx:Buttonxmx:Buttonx="362"y="52"label="ResizePanel" 
  31. click="onClick2()"/> 
  32. </mx:Application> 
  33. <?xmlversionxmlversion="1.0"encoding="utf-8"?> 
  34. <mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml" 
  35. layout="absolute"> 
  36.  <mx:Script> 
  37.   <!--[CDATA[  
  38.    importmx.events.FlexEvent;  
  39.    importmx.controls.Image;  
  40.    privatevarimg:Image;  
  41.    privatefunctiononClick():void  
  42.    {  
  43.     img=newImage();  
  44.     img.source="Image.PNG";  
  45.     panel.addChild(img);  
  46.    }  
  47.    privatefunctiononClick2():void  
  48.    {  
  49.     panel.width=img.width+panel.viewMetrics.left+panel.  
  50. viewMetrics.right;  
  51.     panel.height=img.height+panel.viewMetrics.top+panel.  
  52. viewMetrics.bottom;  
  53.    }  
  54.   ]]--> 
  55.  </mx:Script> 
  56.  <mx:Panelidmx:Panelid="panel"x="133"y="98"width="398"height="360" 
  57. layout="absolute"> 
  58.  </mx:Panel> 
  59.  <mx:Buttonxmx:Buttonx="133"y="52"label="ShowPicture" 
  60. click="onClick()"/> 
  61.  <mx:Buttonxmx:Buttonx="362"y="52"label="ResizePanel" 
  62. click="onClick2()"/> 
  63. </mx:Application> 

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

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

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 全屏 打印 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多