获取Flex 4中Spark Panel的内部容器大小

最新推荐文章于 2018-04-18 00:05:56 发布

最新推荐文章于 2018-04-18 00:05:56 发布 · 223 阅读

收录于

Flex

在Flex中，Panel组件是继承于UIComponent的，UIComponent中定义的组件尺寸信息width和height是对整个控件的宽和高而言，但Panel组件却是带有标题栏和边框，其实际能够装载内容的大小是小于width * height的。

于是，在使用Panel的时候，直接定义width和height没有实际意义，需要定义的应该是Panel的内部容器的大小。这篇文章(http://blog.csdn.net/To9m/archive/2009/10/28/4735966.aspx )介绍了针对Flex 3中的mx:Panel的一种曲线救国的方式（通过viewMetrics.left/right/top/bottom获得左右上下的边框大小，再结合 width和height即可得到内部的实际大小），但在Flex 4的Spark组件中可以简单地通过contentGroup 属性的width和height即可获取。

示例：

<?xml version="1.0" encoding="utf-8"?>
<!--  -->
<s:Application name="Spark_Panel_contentGroup_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:controlBarContent>
        <s:CheckBox id="chckBx" label="Spark Panel controlBarVisible" />
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            protected function lbl1_enterFrameHandler(evt:Event):void {
                lbl1.text = pnl.width + "x" + pnl.height;
            }
 
            protected function lbl2_enterFrameHandler(evt:Event):void {
                lbl2.text = pnl.contentGroup.width + "x" + pnl.contentGroup.height;
            }
        ]]>
    </fx:Script>
 
    <s:Panel id="pnl"
            title="Spark Panel title"
            controlBarVisible="{chckBx.selected}"
            width="300" height="200"
            horizontalCenter="0" verticalCenter="0">
        <s:controlBarContent>
            <s:Button label="Spark Panel control bar contents" />
        </s:controlBarContent>
 
        <mx:Form>
            <mx:FormItem label="Panel width/height:">
                <s:Label id="lbl1" enterFrame="lbl1_enterFrameHandler(event);" />
            </mx:FormItem>
            <mx:FormItem label="Panel contentGroup width/height:">
                <s:Label id="lbl2" enterFrame="lbl2_enterFrameHandler(event);" />
            </mx:FormItem>
        </mx:Form>
    </s:Panel>
 
</s:Application>

示例效果：