Flex：跨分辨率应用

发布于 2024-07-30 06:17:25 字数 137 浏览 2 评论 0原文

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

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

零度° 2024-08-06 06:17:26

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

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.

回复收藏 0 原文

海风掠过北极光 2024-08-06 06:17:26

您可以创建一个具有相对于容器的高度和宽度的应用程序，这样所有组件都可以在所有屏幕分辨率下正确调整自己。

回复收藏 0 原文

风蛊 2024-08-06 06:17:26

我们通常创建一个 MainFrame.mxml，它充当我们的主要组件，并具有其他人提到的布局相对缩放。然后，我们创建仅嵌入一个 MainFrame.mxml 的 AIR 应用程序和另一个也嵌入该 MainFrame.mxml 的 Flex 应用程序。这样我们就可以将整个应用程序保留在 MainFrame 中，而不必担心它是在 Flex 还是 Air 中。话虽这么说，您需要确保不使用任何无法相互转换的 AIR 特定或 Flex 特定调用。

回复收藏 0 原文

~没有更多了~