`

父容器子容器大小设为百分比时,无法获取容器实际大小的问题的解决

阅读更多

在实际开发中主界面总是要充满全屏,但是在程序中如何获取当前窗口的实际大小呢 ??

 

问题描述:

 主程序:

    <?xml version="1.0" encoding="utf-8"?>
   <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    xmlns:local="*" width="100%" height="100%" >
    <local:subView width="100%" height="100%" >
       
    </local:subView>
</mx:Application>

 

 组件 subView:

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"   creationComplete="init()" >
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            public function init():void{
                Alert.show(String(this.width));//获取实际大小

               Alert.show(String(Application.application.width));//主场景实际大小
            }
        ]]>
    </mx:Script>
</mx:Canvas>

 

 运行结果总是 显示 宽度 高度为零!!

 

解决办法:

 主程序:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    xmlns:local="*" width="100%" height="100%" initialize="mainInit()" >
    <mx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            private function mainInit():void{

              //子组建创建完成后执行init2()
                subCanvas.addEventListener(FlexEvent.CREATION_COMPLETE,subCanvas.init2);


            }
        ]]>
    </mx:Script>
    <local:subView width="100%" height="100%" id="subCanvas">
       
    </local:subView>
</mx:Application>

 组件 subView:

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"   >
    <mx:Script>
        <![CDATA[
            import mx.core.Application;
            import mx.controls.Alert;
            public function init():void{
                Alert.show(String(this.width));
                Alert.show(String(Application.application.width));
            }
            public function init2(evt:Event):void{
                Alert.show(String(this.width));
                Alert.show(String(Application.application.width));
            }

        ]]>
    </mx:Script>
</mx:Canvas>

 

终于看到实际大小了,这样做比较麻烦,不知有没有更好的解决办法。

 

 

 

参考文章:

UIComponent的生命周期(life cycle)

地址 :     http://www.5uflash.com/Flex-AIR/Flexziliao/1556.html

分享到:
评论
2 楼 baixiaozhe 2009-08-16  
nathanlee 写道
ChangeWatcher.watch(this, "width", onSizeChangeWatcher);
				ChangeWatcher.watch(this, "height", onSizeChangeWatcher);


public function onSizeChangeWatcher(event:Event):void
		{
			Alert.show(" (width: " + this.width + ",height: " + this.height + ")");
		}


学习了 谢谢
1 楼 nathanlee 2009-08-13  
ChangeWatcher.watch(this, "width", onSizeChangeWatcher);
				ChangeWatcher.watch(this, "height", onSizeChangeWatcher);


public function onSizeChangeWatcher(event:Event):void
		{
			Alert.show(" (width: " + this.width + ",height: " + this.height + ")");
		}

相关推荐

    text-show插件,容器大小固定,根据文字多少来调节显示的字体大小

    这款插件专为jQuery设计,其核心功能是使容器的大小保持固定,根据文本内容的多少自动调整字体大小,确保文本始终能够适应容器,实现美观且易读的显示效果。 `text-show`插件的出现,使得开发者无需手动计算和调整...

    jQuery自适应父容器宽度高度代码.zip

    总的来说,这个压缩包提供了一个基于jQuery的解决方案,使得网页元素可以自动调整大小以适应其父容器的宽度和高度变化。这在响应式设计和移动优先的开发策略中尤其有用,确保了在不同设备和屏幕尺寸上的良好用户体验...

    jq武魂官网容器适应图片大小而变化源码.rar

    1. **百分比单位**:在CSS中,使用百分比作为图片宽度或高度的单位,可以让图片相对于其父元素的大小进行调整。例如,`width: 100%; height: auto;` 可以确保图片在容器内完全填充,且保持原始宽高比。 2. **媒体...

    div嵌套的div溢出时换行

    为子`div`设置百分比宽度,使其根据父容器的宽度动态调整大小,可以防止溢出。例如: ```css .child-div { width: 80%; /* 可以根据需要调整 */ } ``` 在实际开发中,需要结合具体需求和浏览器兼容性选择合适...

    关于应用容器(Application Container)

    这段代码演示了如何使用不同的容器类型(如`mx:Panel`、`mx:HDividedBox`等)来构建复杂的应用程序布局,并确保这些容器能根据父容器的大小自动调整。 #### 总结 应用容器是Flex应用程序的核心组成部分之一,负责...

    压力容器R1考题.doc

    压力表的精度等级数字反映了表盘显示的压力值与实际压力值之间的允许误差百分比,对于确保操作安全具有重要意义。同时,压力表的工作原理是基于弯管受内压而产生变形,通过相关机械装置将位移放大并转换为可视的压力...

    jquery图片浏览自适应大小

    为了实现自适应,我们可以创建一个响应式的图片容器,比如一个div元素,它的宽度和高度设置为百分比,或者使用CSS3的`max-width`和`max-height`属性限制最大尺寸。然后,通过jQuery监听窗口大小变化(`$(window)....

    压力容器设计制造200问答

    ### 压力容器设计制造200问答关键知识点总结 #### 一、法规与规程 **1.1 主要法规和规程** 压力容器设计必须遵循的主要法规和规程包括: 1. **国发[1982]22号:** 《锅炉压力容器安全监察暂行条例》(简称《条例...

    自定义viewgroup实现百分比布局

    3. 计算子视图大小:在onMeasure()方法中,获取父视图的测量宽高(MeasureSpec.getSize()),然后根据子视图的百分比属性计算其实际尺寸。 4. 布局子视图:在onLayout()方法中,根据每个子视图的大小和位置参数,...

    asp.net 图形容器的应用

    - `AlternateText`:当图像无法显示时,浏览器会显示此文本,对SEO也有帮助。 - `Width`和`Height`:设定图像的宽度和高度,可以是像素或百分比。 - `BorderWidth`和`BorderColor`:定义图像边框的宽度和颜色。 ...

    Flex布局之关于组件的大小

    这个属性允许你以百分比的形式指定组件的宽度,基于其父容器的宽度。这在响应式设计中非常有用,因为组件会根据容器大小的变化自动调整自身宽度。 #### 6. *scaleX* *scaleX*属性用于横向缩放组件,即调整组件的...

    Extjs4 API文档阅读(三)——布局和容器

    这些子`Panel`被设置为相同的高度和宽度百分比,以便它们能够均匀地分布在父容器内。 #### 二、布局的概念及使用 布局(Layout)是Ext JS中的另一个核心概念。它是用来管理容器内组件的位置和尺寸的机制。布局决定了...

    解决layer弹出层自适应页面大小的问题

    1. 改为百分比形式:这种方式可以使弹出层相对于浏览器窗口的大小进行调整,但可能会遇到子元素的布局问题,尤其是当子元素的高度计算错误时,内容可能无法完全显示。 2. 使用em或rem单位:这些相对单位依赖于父...

    asp.net 控件随着窗口大小按比例变化源码

    响应式设计的关键在于使用百分比单位而不是固定像素来定义元素的宽度和高度,这样它们可以随容器的大小自动调整。例如,如果一个图片的宽度设置为`width: 100%`,它将始终填充其父元素的宽度。 在VB.NET中,我们...

    CSS参考手册_第6章__CSS容器属性

    ### CSS参考手册_第6章__CSS容器属性 #### 6.1 什么是盒模型 在CSS中,每一个文档元素(无论是块级元素还是内联元素)都会生成一个矩形盒子,这一概念被称为盒模型。盒模型由多个部分组成:边界(margin)、边框...

    微信小程序开发中flex布局容器及元素之属性技术释疑.pdf

    微信小程序开发中的Flex布局是一种灵活的布局方式,其核心是通过设置容器的display属性为flex或inline-flex来启用。Flex布局允许容器内的元素能够以灵活的方式进行排列,适应不同屏幕尺寸和分辨率。在微信小程序中,...

    百分比布局

    百分比布局是Android开发中的一种布局方式,它允许开发者基于父布局的大小来定义子视图的尺寸,而不是固定像素值。这种方式在不同屏幕尺寸和分辨率的设备上尤其有用,可以实现更灵活、响应式的界面设计。百分比布局...

    Delphi根据窗体大小自动缩放控件..rar

    Align属性则用于使控件对齐到父容器的边缘或相对于其他控件,当窗体大小改变时,它们会自动调整大小以保持对齐。 5. **DPI感知**: Delphi 支持高DPI显示,这意味着应用程序可以正确地在高分辨率显示器上显示。...

    wpf 界面控件随着界面大小进行缩放

    2. **相对单位**:在WPF中,通常使用相对单位(如星号(*)或百分比)来定义控件的宽度和高度,这样控件的大小将根据其父容器的大小动态调整。 3. **ViewBox**:ViewBox控件是实现界面缩放的核心组件。它可以自动缩放...

Global site tag (gtag.js) - Google Analytics