Question

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

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

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

如何考虑组件维度（测试用例中的ProgressBar）？
绑定 {width / 2} 是个好主意吗？在某些情况下，它不会发送不必要的DATA_CHANGE事件吗？

最后我想知道，这一切如何适用于使用 StageScaleMode.SHOW_ALL 的全屏应用程序 - 因为目前我的应用程序在全屏模式下与左上角对齐并且有一个白色的死右边的区域。（这至少是对纯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>

enter image description here

Answer 1

比这更容易：只使用UIComponent的horizontalCenter和verticalCenter属性。在BasicLayout中使用时，组件将始终居中。像这样：

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

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

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

修改

注意到你在应用程序上使用固定的“宽度”和“高度”：如果你希望你的应用程序真正填满屏幕，你必须使这些'100％'。这是白色空间的另一个可能原因。

Answer 2

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

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

Answer 3

我通常做两件事，

我将对象放在VGroups / HGroups中对齐，我也使用相对宽度，例如百分比。

像过去使用HTML表一样思考。它非常有效，特别是如果您的画布调整大小。

我的所有画布都必须可以调整大小，因为我只想编写我的应用程序一次，用于个人电脑，移动设备等，所以我只是默认设置一切。

将Flex组件放置在屏幕中间

3 个答案: