apache-flex - 弹性 : Cross resolution applications

Question

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

Answer 1

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

这非常类似于使用 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>

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

---

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

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

这当然要求您位于 Canvas 容器内或将主应用程序容器设置为绝对布局。

一个简单的例子:

<?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()，您可以创建无数种方法来更好地动态定位组件并调整组件大小，从而更好地利用屏幕空间。