Размещение Flex-компонента в середине экрана - PullRequest
Новая
       40

Размещение Flex-компонента в середине экрана

1 голос
/ 06 сентября 2011

У меня очень общий вопрос и я подготовил простой тестовый пример.

При использовании BasicLayout (т. Е. Абсолютного позиционирования) - каков наилучший подход для размещения компонента Flex в центре приложения?

В приведенном ниже тесте я использую x = "{width / 2}" , но это дает мне как минимум 2 проблемы:

  1. Как мне учесть размеры компонентов (ProgressBar в тестовом примере)?

  2. Является ли привязка {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

Ответы [ 3 ]

3 голосов
/ 06 сентября 2011

Намного проще: просто используйте HorizontalCenter и verticalCenter свойства UIComponent.При использовании внутри BasicLayout компонент всегда будет центрирован.Например: 

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

Если вы присвоите этим свойствам значение, отличное от '0', компонент будет смещен от середины на количество пикселей, указанное в качестве значения.(например, horizontalCenter="50" сместит компонент на 50 пикселей вправо от центра родительского компонента)

Возможно, это пробел из-за использования systemManager.stage.scaleMode=StageScaleMode.SHOW_ALL.Просто удали эту строку.В любом случае, почему вы это делаете?

edit

Только что заметил, что вы используете фиксированные значения 'width' и 'height' в своем приложении: вам придетсяСделайте эти «100%», если вы хотите, чтобы ваше приложение действительно заполнило весь экран.Это еще одна возможная причина для этого пробела.

1 голос
/ 14 августа 2013

Чтобы выровнять приложение по центру (а не по левому / правому краю) при использовании systemManager.stage.scaleMode=StageScaleMode.SHOW_ALL, установите systemManager.stage.align на пустую строку, то есть: 

// in your Application creationComplete handler
systemManager.stage.scaleMode = StageScaleMode.SHOW_ALL;
systemManager.stage.align = "";
0 голосов
/ 07 сентября 2011

Я обычно делаю 2 вещи,

Я размещаю объекты внутри VGroups / HGroups с выравниванием, я также использую относительную ширину, например, проценты.

Подумайте, как в старые времена при использовании таблиц HTML. Это работает очень хорошо, особенно если размер вашего холста изменен.

Размер всех моих полотен должен быть изменяемого размера, так как мне нравится писать свои приложения только один раз, для ПК, мобильных устройств и т. Д., Поэтому я просто делаю все масштабируемым по умолчанию.

...