Flex：跨分辨率应用

What is the best way to create applications in Flex/AIR,
which look and feel the same irrespective of the screen
resolution?
  

在 Flex 应用程序中创建布局时，您可以实现一致的布局屏幕分辨率独立的外观和使用感觉相对缩放.

这非常类似于创建一个liquid使用 HTML 进行布局。

例如，要创建一个简单的两列应用程序（左侧导航和内容），您只需要两个容器，一个是预定义的，一个是可无限扩展的。

如下：

<mx:HBox width="225">
    <mx:Button label="Menu 1"/>
    <mx:Button label="Menu 2"/>
    <mx:Button label="Menu 3"/>
</mx:HBox>
<mx:HBox width="100%">
    Any content here will flow fluidly across the entire screen regardless of window size/screen resolution.
</mx:HBox>

使用上述基础知识，您可以创建适用于任何屏幕的应用程序布局。

However，有时您需要创建更复杂的布局方案，其中许多可互换的组件可以动态调整大小以适应窗口。

为此你可以这样做绝对定位。 覆盖组件 updateDisplayList() 函数并创建您自己的大小调整/定位规则。

当然，这需要您位于 Canvas 容器中或将主应用程序容器设置为absolute layout.

一个简单的例子：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void 
        {
            //find out how big we are
            var stageWidth:int = this.width;
            //center the box in the middle of the page.
            centeredBox.x = stageWidth - (centeredBox/2);
        }
    </mx:Script>
    <mx:HBox id="centeredBox" width="500"/>
</mx:Application>

通过重写 updateDisplayList()，您可以创建无数的方法来更好地动态定位和调整组件的大小，以更好地使用屏幕空间。