如何根据浏览器高度/宽度获取应用程序宽度/高度

Question

我正在尝试动态更改应用程序上组件的位置。有没有办法在用户每次更改他/她的浏览器窗口大小时调用调整大小的事件侦听器？

Answer 1

是的，将 BrowserResizeHandler 作为珠子添加到应用程序中，并在初始视图上侦听"sizeChanged"。

像这样的伪代码(未经测试(：

<js:Application applicationComplete="{myView.addEventListener("sizeChanged", sizeChangedHandler)}>
<js:beads>
<js:BrowserResizeHandler/>
</js:beads>
<initialView>
<MyView id="myView/>
</initialView>
</js:Application>

Answer 2

我不知道如何使珠子工作。找不到正确的问题。但是，我使用以下方法来调用调整大小：

<js:Application applicationComplete="initiateApplication(event)">   
<fx:Script>
<![CDATA[
protected function initiateApplication(event:Event):void{
window.addEventListener("resize", resizeApp);
}
protected function resizeApp():void{
trace(this.height=document.documentElement.clientHeight)
trace(this.width=document.documentElement.clientWidth)
}
]]>
</fx:Script>
</js:Application>

如果有人使用了其他方法，请分享。

Answer 3

扩展 https：//stackoverflow.com/users/11577184/yishayw 的答案： 当应用更改大小时，BrowserResizeHandler 珠子会从视图中调度一个sizeChanged事件，因此类似这样的事情应该会有所帮助：

<js:Application applicationComplete="onComplete()">
<fx:Script>
<![CDATA[
protected function onComplete():void{
myView.addEventListener("sizeChanged", handleResize);
}
protected function handleResize():void{
// do something with the new size...
trace(this.height)
trace(this.width)
}
]]>
</fx:Script>
<js:beads>
<js:BrowserResizeHandler/>
</js:beads>
<initialView>
<MyView id="myView/>
</initialView>
</js:Application>

如果您的视图位于单独的 MXML 文件中，则处理大小调整的代码将转到那里，而不是主应用程序 mxml 文件。

我建议查看各种风格的 Flex 布局珠子，因为我发现这使得调整大小处理程序几乎是不必要的。