将 Flex 组件放置在屏幕中间

Question

我有一个非常普遍的问题，并准备了一个简单的测试用例。

使用 BasicLayout（即绝对定位）时 - 将 Flex 组件放置在应用程序中心的最佳方法是什么？

在下面的测试用例中，我使用的是 x="{width/2}"，但这至少给我带来了 2 个问题：

1. 如何考虑组件尺寸（进度条中的进度条）测试用例）？

2. 使用绑定{width/2}是个好主意吗？在某些情况下，它不会发送不必要的 DATA_CHANGE 事件吗？

最后我想知道，这一切如何适用于使用 StageScaleMode.SHOW_ALL 的全屏应用程序 - 因为目前我的应用程序在全屏模式下与左上角对齐，并且在全屏模式下有一个白色死区对吧。 （这至少与纯 Flash/AS3 行为有所不同，在纯 Flash/AS3 行为中，全屏内容显示在屏幕中央，左右各有 2 个死区）。

<?xml version="1.0" encoding="utf-8"?>
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    width="700" height="525" 
    backgroundColor="#CCFFCC"
    initialize="systemManager.stage.scaleMode=StageScaleMode.SHOW_ALL">

    <fx:Script>
        <![CDATA[
            private function fullScreen(event:MouseEvent):void {
                stage.displayState = 
                    stage.displayState == StageDisplayState.NORMAL ?
                    StageDisplayState.FULL_SCREEN :
                    StageDisplayState.NORMAL;
            }
        ]]>
    </fx:Script>

    <s:states>
        <s:State name="normal" />
        <s:State name="connected" />
    </s:states>

    <s:CheckBox right="10" bottom="10" 
        label="Full screen" 
        click="fullScreen(event)" />

    <mx:ProgressBar indeterminate="true" 
        x="{width/2}" y="{height/2}" 
        label="Connecting..." labelPlacement="center" 
        includeIn="normal" />

</s:Application>            

Answer 1

比这更简单：只需使用 horizo​​ntalCenter< /a> 和 verticalCenter 属性。当在 BasicLayout 内部使用时，组件将始终居中。像这样：

<mx:ProgressBar indeterminate="true" 
                horizontalCenter="0" verticalCenter="0"
                label="Connecting..." labelPlacement="center" />

如果您为这些属性指定“0”以外的值，则组件将从中间偏移您指定为值的像素数量。 （例如 horizo​​ntalCenter="50" 会将组件向父组件中心右侧偏移 50 像素）

该空白可能是由于您使用了 systemManager.stage.scaleMode= StageScaleMode.SHOW_ALL。只需删除该行即可。你为什么要这么做？

编辑

刚刚注意到您在应用程序上使用了固定的“宽度”和“高度”：如果您希望应用程序真正填满屏幕，则必须将这些设置为“100%”。这是造成该空白的另一个可能原因。

Answer 2

要在使用 systemManager.stage.scaleMode=StageScaleMode.SHOW_ALL 时使应用程序居中（而不是左/右对齐），请将 systemManager.stage.align 设置为空字符串 - IE：

// in your Application creationComplete handler
systemManager.stage.scaleMode = StageScaleMode.SHOW_ALL;
systemManager.stage.align = "";

Answer 3

我通常做两件事，

我将对象放置在 VGroups/HGroups 内并对齐，我还使用相对宽度，例如百分比。

就像过去使用 HTML 表格一样思考。它的效果非常好，特别是当你的画布大小被调整分配时。

我的所有画布都必须可调整大小，因为我喜欢只为 PC、移动设备等编写一次应用程序，所以我默认将所有内容设置为可缩放。