屏幕分辨率太小时如何缩放 Flex 应用程序？答案

【问题标题】：How to scale Flex application when screen resolution is too small?屏幕分辨率太小时如何缩放 Flex 应用程序？
【发布时间】：2011-03-18 10:05:03
【问题描述】：

我正在开发一个 Flex 应用程序，该应用程序专为 1280x1024 及更高的屏幕分辨率而设计。在极少数情况下使用投影仪（通常最大为 1024x768 像素），我想缩小应用程序（目前我得到很多滚动条和剪辑）。

我已经尝试过应用程序的属性scaleX 和scaleY 以及stage.scaleMode。但是，我想不出办法来

当应用程序的宽度和高度大于某些值时，在不缩放的情况下渲染应用程序
当宽度或高度小于特定值时使用缩放

我怎样才能做到这一点？

【问题讨论】：

你不能只用相对值来设计你的应用程序，这样你的应用程序就会自行调整大小！？
我已经在尽可能地使用相对值了。但是，有些东西需要一定的空间才能有用。例如。 DataGrid 中的列需要 minWidth 或内容被截断/换行。 99% 的时间应用程序都在支持最小分辨率 1280x1024 的设备上使用。我不想更改剩余 1% 的 GUI 布局...

标签： apache-flex flex4

【解决方案1】：

我会通过在顶级应用程序的“resize”事件中添加一个事件监听器来解决这个问题。这是调整大小事件的示例方法处理程序（假设处理程序位于主应用程序类中，因此“this”指的是顶级应用程序）：

function onResize(e:Event):void {
  if(this.scaleX > 1){
    //check if we need to readjust to a normal scale of 1
    var effectiveWith:int = this.width*this.scaleX;
    var effectiveHeight:int = this.height*this.scaleY;
    if(effectiveWidth > 1280 || effectiveHeight > 1024){
        this.scaleX = 1;
        this.scaleY = 1;
    }
   }else{
    //the scale is still 1, lets see if we should scale it up
    if(this.width < 1280 || this.height < 1024){
        this.scaleX = (1280-this.width)/1280 + 1;
        this.scaleY = (1024-this.height)/1024 + 1;
    }
  }
}

【讨论】：

你不应该除以 scaleX/Y 吗？为什么要使用 this 关键字？ IMO 它只会增加另一层混乱。
我不同意使用“this”关键字。非常清楚什么是局部变量，什么是 Application 对象上的实例变量。我不提倡您和其他任何人以这种方式编写您的生产代码，但出于解释的目的，它认为它更清楚。如果您不同意，请随时撰写您自己的回复。
感谢代码 sn-p。不幸的是，这并不完全是我的想法。我需要缩小，而不是放大。

【解决方案2】：

我终于找到了一种缩小应用程序的方法。实际上，孩子们需要扩展的应用程序。否则应用程序的width 和height 会缩小。

由于我使用的是状态，因此我也必须为 currentStateChanging 事件添加一个事件处理程序。

private static const MIN_WIDTH:Number = 1250;
private static const MIN_HEIGHT:Number = 800;

protected function application_currentStateChangingHandler():void
{
    callLater(scaleElements);
}

protected function application_resizeHandler():void
{
    scaleElements();
}

protected function scaleElements():void
{
    var newScaleX:Number = 1;
    var newScaleY:Number = 1;

    if (width < MIN_WIDTH)
        newScaleX = width / MIN_WIDTH;

    if (height < MIN_HEIGHT)
        newScaleY = height / MIN_HEIGHT;

    var newScale:Number = Math.min(newScaleX, newScaleY);

    for (var i:int = 0; i < numElements; i++)
    {
        var element:DisplayObject = getElementAt(i) as DisplayObject;

        if (element)
        {
            element.scaleX = newScale;
            element.scaleY = newScale;
        }
    }
}

【讨论】：

不幸的是，弹出窗口和工具提示无法使用此解决方案进行缩放。

【解决方案3】：

为了扩展整个应用程序，而不是单独扩展所有元素，我删除了循环并添加了：

this.scaleX = newScale;
this.scaleY = newScale;

【讨论】：

我试过了。但是，当以这种方式缩放时，应用程序不再填满整个浏览器窗口。当它缩小时，浏览器窗口的右侧和底部会出现空白。

【解决方案4】：

Alex Harui 在 2009 年提出了一个很好的解决方案。请参阅ScaleMode 以自动扩展应用程序。请参阅示例 here 它是如何工作的。

【讨论】：