Flex : 跨分辨率应用 [英] Flex : Cross resolution applications

问题描述

<前>在 Flex/AIR 中创建应用程序的最佳方式是什么?无论屏幕如何，外观和感觉都相同解析度?

解决方案

在您的 flex 应用程序中创建布局时，您可以通过使用 relative缩放.

这非常类似于使用 HTML 创建 liquid 布局.

例如，要创建一个简单的两列应用程序(左侧导航和内容)，您只需要两个容器，一个是预定义的，另一个是无限缩放的.

如下:

<mx:Button label="菜单 1"/><mx:Button label="菜单 2"/><mx:Button label="菜单 3"/></mx:HBox><mx:HBox width="100%">无论窗口大小/屏幕分辨率如何，此处的任何内容都将在整个屏幕上流畅地流动.</mx:HBox>

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

<小时>

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

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

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

一个简单的例子:

通过覆盖 updateDisplayList()，您可以创建无数种方法来更好地动态定位和调整组件的大小，从而更好地利用屏幕空间.

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

解决方案

When creating the layout in your flex application, you can achieve a consistent screen resolution independent look and feel from using relative scaling.

This is much akin to creating a liquid layout with HTML.

For example, to create a simple two column application— left navigation and content— you only need two containers, one predefined and one left to scale indefinitely.

As follows:

<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>

Using the above basics you can create a application layout that forms to any screen.

---

However, sometimes you need to create a more elaborate layout scheme with many interchanging components resizing dynamically to fit the window.

For this you can do Absolute Positioning. override the components updateDisplayList() function and create your own sizing/positioning rules.

This of course requires you to be within a Canvas container or have the main Application container set to absolute layout.

A simple example:

<?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>

By overriding updateDisplayList() you can create endless ways to better dynamically position and size your components to better use the screen realestate.

这篇关于Flex : 跨分辨率应用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！