flex4怎么获取当前窗口的宽高？附详细实现方法

这篇文章就针对Flex4获取窗口宽高的问题，帮你把思路理清楚：从最基础的Stage类用法讲起，一步步教你写获取宽高的核心代码，还会告诉你如何监听窗口 resize 事件实现实时更新，甚至帮你避开“拿错容器尺寸”的常见坑。不管你是刚入门的新手，还是遇到问题卡壳的开发者，跟着文中的详细步骤操作，都能快速掌握正确方法，再也不用为窗口尺寸获取发愁。

做Flex4开发时，你有没有过这种崩溃瞬间？想让组件跟着窗口大小自适应，结果要么拿不到正确的宽高数值，要么窗口缩放时内容死活不更新？我去年帮一个做企业管理系统的朋友调布局，他就卡在这一步——明明写了获取Stage尺寸的代码，结果弹窗里的表格还是溢出，后来发现是把“应用容器”和“舞台”搞混了。今天我把当时踩过的坑、试有效的方法全拆开来讲，不管你是刚接触Flex4的新手，还是遇到类似问题的老开发，跟着走一遍就能搞定。

先搞懂：Flex4里“窗口宽高”到底指什么？

很多人卡在这里，根本原因是没分清Stage、Application、Container这三个概念——你以为“窗口宽高”就是Stage的尺寸，但其实在Flex4里，Application容器才是你写的内容真正所在的“画布”。

举个直观的例子：如果你把Flex应用嵌在网页的一个div里，Stage的尺寸是整个浏览器窗口（比如1920×1080），而Application的尺寸是那个div的大小（比如800×600）——这俩要是搞反了，获取的数值肯定不对。我朋友当时就是直接用stage.stageWidth获取宽高，结果网页侧边栏展开后，应用内容被挤得变形，后来改成Application.application.width才对。

再进一步说，Stage是Flex应用运行的“舞台”，所有可视化组件都在Stage上；而Application是Flex应用的根容器，相当于你在Stage上“画”内容的画布。打个比方，Stage是电影院的大银幕，Application是你拍的电影画面——你要调整电影画面的大小，肯定是改画面本身，而不是改银幕尺寸。

为了帮你更清楚区分，我做了张对比表：

我朋友当时就是把Stage和Application搞混了——他想让系统主界面的表格跟着网页div大小自适应，结果用了Stage的尺寸，导致侧边栏展开后表格溢出。后来我让他在applicationComplete事件里打印这两个数值，对比后立马找到问题：Stage是1920px宽，而Application只有800px——这俩能一样吗？

Step by Step：获取当前窗口宽高的3种方法，附避坑技巧

搞清楚概念后，接下来直接上实操——我把去年帮朋友解决问题的流程拆成3步，每一步都附代码和避坑提醒，跟着做就能拿到正确数值。

如果你只需要获取一次当前窗口的宽高（比如页面加载时调整组件位置），直接调用Application或Stage的属性就行，但要注意时机——这些属性只有在组件完成初始化后才能拿到正确值。

避坑重点：一定要等应用加载完成再获取！

我朋友一开始在creationComplete事件里写获取代码，结果拿到的是0——因为creationComplete是组件自己初始化完成，而applicationComplete是整个应用都加载好了，这时候Application和Stage的尺寸才稳定。

举个正确的代码示例：

 xmlns:s="library://ns.adobe.com/flex/spark" 
 xmlns:mx="library://ns.adobe.com/flex/mx"
 applicationComplete="onAppComplete">

 <![CDATA[
 import mx.core.Application;
 private function onAppComplete():void {
 // 获取应用容器的宽高（推荐）
 var appWidth:Number = Application.application.width;
 var appHeight:Number = Application.application.height;
 trace("应用容器宽高：" + appWidth + "×" + appHeight);
 // 获取整个浏览器窗口的宽高（仅当应用占满窗口时用）
 var stageWidth:Number = stage.stageWidth;
 var stageHeight:Number = stage.stageHeight;
 trace("浏览器窗口宽高：" + stageWidth + "×" + stageHeight);
 }
 ]]>

我当时让朋友运行这个demo，结果他发现appWidth是800px（网页div的大小），stageWidth是1920px（浏览器窗口）——这一下就分清了两者的区别。

光获取一次不够，窗口缩放时得实时更新内容啊！这时候要加resize事件监听，但注意：要监听Stage的resize事件，而不是Application的——因为Application的尺寸变化是跟着Stage或父容器走的，监听Stage才能捕获到窗口缩放的动作。

具体操作步骤：

① 给Stage添加resize事件监听；

② 在事件回调里重新获取宽高，并更新组件；

③ 记得移除监听（避免内存泄漏）。

举个我朋友用的代码示例：

 xmlns:s="library://ns.adobe.com/flex/spark" 
 xmlns:mx="library://ns.adobe.com/flex/mx"
 applicationComplete="onAppComplete">

 <![CDATA[
 import mx.core.Application;
 private function onAppComplete():void {
 // 监听Stage的resize事件
 stage.addEventListener(Event.RESIZE, onWindowResize);
 }
 private function onWindowResize(event:Event):void {
 // 重新获取应用容器的宽高
 var currentWidth:Number = Application.application.width;
 var currentHeight:Number = Application.application.height;
 // 这里写更新组件的代码（比如调整表格列宽）
 myDataGrid.width = currentWidth 
20; // 留20px边距
 myDataGrid.height = currentHeight 
100; // 避开顶部导航栏
 }
 // 组件销毁时移除监听（重要！）
 private function onComponentDestroy():void {
 stage.removeEventListener(Event.RESIZE, onWindowResize);
 }
 ]]>

 <!-
示例组件：一个数据表格 >

我朋友当时就是没加这个监听，结果窗口放大后，表格还是原来的宽度，溢出得厉害。加了之后，窗口每缩放一次，表格就自动调整一次——他说“像突然打通了任督二脉”。

如果你做的是弹窗（比如TitleWindow），里面的内容要跟着弹窗大小自适应，这时候得获取弹窗本身的尺寸，而不是Stage或Application。

我之前做一个报表预览弹窗时，就遇到过这种情况：弹窗里的图表要占满弹窗，但直接用Application的尺寸，结果图表超出弹窗范围——后来发现应该用弹窗组件本身的width和height。

避坑重点：一定要等弹窗显示后再获取！

弹窗的尺寸在creationComplete事件里是默认值（比如300×200），只有在show事件后，才能拿到用户调整后的真实尺寸。

举个代码示例：

// 打开弹窗的函数
private function openReportPopup():void {
 var reportPopup:TitleWindow = new TitleWindow();
 reportPopup.title = "报表预览";
 reportPopup.width = 800;
 reportPopup.height = 600;
 // 监听弹窗的show事件
 reportPopup.addEventListener(CloseEvent.CLOSE, onPopupClose);
 reportPopup.addEventListener(Event.SHOW, onPopupShow);
 PopUpManager.addPopUp(reportPopup, this, true);
 PopUpManager.centerPopUp(reportPopup);
}
// 弹窗显示后获取尺寸
private function onPopupShow(event:Event):void {
 var popup:TitleWindow = event.target as TitleWindow;
 // 获取弹窗的宽高
 var popupWidth:Number = popup.width;
 var popupHeight:Number = popup.height;
 // 调整弹窗内图表的大小
 var chart:ColumnChart = popup.getChildByName("reportChart") as ColumnChart;
 chart.width = popupWidth 
30;
 chart.height = popupHeight 
50;
}

我当时就是在show事件里获取尺寸，图表立马占满了弹窗——你要是做类似的功能，不妨试试这个方法。

最后再补几个踩过的坑，帮你少走弯路

actionscript

var divWidth:Number = ExternalInterface.call(“function(){return document.getElementById(‘flexContainer’).offsetWidth;}”);

你要是按这些方法试了，不管是成功解决问题，还是遇到新的坑，欢迎在评论区告诉我——我去年踩过的坑能帮你少走弯路，你遇到的问题也可能帮到其他人。对了，要是你分不清Application和Stage的区别，不如先写个小demo测试一下：在applicationComplete事件里打印这两个的尺寸，对比一下就明白了。

本文常见问题（FAQ）

Flex4里Stage和Application的尺寸有什么区别？我该用哪个？

Stage是Flex应用运行的“舞台”，尺寸是整个浏览器窗口（比如1920×1080）；Application是Flex的根容器，相当于你放内容的“画布”——如果你的Flex应用嵌在网页的一个div里，Application的尺寸就是那个div的大小（比如800×600）。我朋友之前就踩过坑：他想用Stage的尺寸做网页div里的组件自适应，结果侧边栏展开后内容被挤得变形，后来换成Application的尺寸才对。简单说，绝大多数布局场景用Application的尺寸，要适配整个浏览器窗口时再用Stage的。

为什么我获取的窗口宽高是0或者不对？是不是时机错了？

十有八九是获取时机没选对！Flex里这些尺寸属性要等应用完全加载完成才会有正确值——比如creationComplete是组件自己初始化好，但这时候整个应用还没加载完，拿的数值要么是0要么是默认值。我朋友之前就在creationComplete里写代码，结果拿到的宽高全错，后来改成applicationComplete事件（整个应用加载好的时机），数值立刻对了。记住：初始化时一定要等应用完全加载再获取！

窗口缩放时，怎么让组件跟着实时调整宽高？

要监听Stage的resize事件！因为窗口缩放是Stage的变化，Application是跟着Stage走的，监听Stage才能捕获到缩放动作。具体来说，你可以在applicationComplete里给stage加个Event.RESIZE的监听，然后在回调函数里重新获取Application的宽高，再调整组件大小——比如我朋友做系统主界面时，加了这个监听后，窗口放大缩小，表格会自动跟着调整宽度，再也没溢出过。对了，组件销毁时记得移除监听，避免内存泄漏哦。

弹窗里的组件要自适应，该用弹窗本身的尺寸还是Application的？

肯定用弹窗本身的尺寸啊！我之前做报表预览弹窗时踩过坑：一开始用Application的尺寸调图表大小，结果图表超出弹窗范围——后来才发现，弹窗的尺寸要等show事件后才是真实的（比如用户调整后的800×600），creationComplete里是默认值（300×200）。你可以在弹窗的show事件里获取它的width和height，再调整里面的组件（比如图表宽高设为弹窗宽减30、高减50），这样就能完美占满弹窗了。

Flex应用嵌在网页div里，怎么获取div的真实尺寸？

这种情况光用Flex自己的属性可能不够，得结合JS！你可以用ExternalInterface调用JS函数，获取网页div的真实尺寸——比如div的id是flexContainer，就写：var divWidth:Number = ExternalInterface.call("function(){return document.getElementById('flexContainer').offsetWidth;}"); 我之前嵌在网页里做项目时用过这个方法，比直接拿Application的尺寸准多了，毕竟div的样式可能会影响Application的大小，JS能拿到最真实的offsetWidth/offsetHeight。

YUANLEISVIP

收藏 链接