Как переместить метку в вертикальном расположении в произвольном месте в Flex 4.5? - PullRequest
Новая
       57

Как переместить метку в вертикальном расположении в произвольном месте в Flex 4.5?

0 голосов
/ 15 июня 2011

Я знаю, что это очень просто для тех, кто разбирается в флексе, но я только начинаю.

Например, у меня есть это: 

<s:Label id="lbl2"
         alpha="0.0"
         text="Cute Software Engineer"
         color="#ffffff"
         fontSize="32" />

Я хотел бы переместить мой ярлык сказать в верхнем правом углу?

Я не могу изменить свой макет на базовый / абсолютный макет, так как я хочу, чтобы мои метки постоянно центрировались на экране. После нескольких анимаций я хотел бы переместить метку в верхний правый угол.

1 Ответ

1 голос
/ 18 июня 2011

Здесь есть несколько вариантов (как обычно!). Очевидным ответом было бы отказаться от вертикальной компоновки и рефакторинга для абсолютной компоновки, используя ограничения и свойства horizontalCenter и verticalCenter, как предложил Гарри, а затем расположить элемент как угодно / когда угодно.

Если вам абсолютно необходимо сохранить вертикальную компоновку, другой вариант (более замысловатый) - создать обертку (например, группу), чтобы обернуть ваш вертикально размеченный компонент. Затем удалите элемент из verticalLayout, установите его положение и добавьте в оболочку.

Я создал небольшой тестовый проект, чтобы проиллюстрировать второй вариант. Щелчок по кнопкам, расположенным внизу, удаляет метку из вертикального макета и добавляет ее в абсолютную обертку, расположенную в верхнем правом углу ... вы также можете нажать кнопку «Заменить», чтобы добавить элемент обратно в вертикальный компонент ... НАДЕЖДА В ЭТО ПОМОГАЕТ! 

<?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" minWidth="955" minHeight="600">

    <fx:Script>
        <![CDATA[
            import mx.core.IVisualElement;

            protected function remove_clickHandler(event:MouseEvent):void
            {
                // remove element from relative container and store an instance of it
                var tempElement:IVisualElement = relativeContainer.removeElement(lbl2);

                // set the elements new position
                tempElement.right = 0;
                tempElement.top = 0;

                // Add element to absolute wrapper
                wrapper.addElement(tempElement);

                replace.enabled = true;
                remove.enabled = false;
            }

            protected function replace_clickHandler(event:MouseEvent):void
            {
                // remove element from absolute container and store an instance of it
                var tempElement:IVisualElement = wrapper.removeElement(lbl2);

                // Add element to relative container (at its origial position)
                relativeContainer.addElementAt(tempElement, 1);

                replace.enabled = false;
                remove.enabled = true;
            }

        ]]>
    </fx:Script>

    <fx:Declarations>
    </fx:Declarations>

    <!-- ABSOLUTE WRAPPER CONTAINER (THIS COULD ALSO JUST BE THE APPLICATION ITSELF, AS LONG AS ITS LAYOUT IS SET TO BASIC) -->
    <s:Group id="wrapper" width="800" height="600">

        <!-- FILL TO POINT OUT THAT THIS IS THE ABSOLUTE CONTAINER -->
        <s:Rect id="outerFill" left="0" top="0"
                bottom="0" right="0">
            <s:fill>
                <s:SolidColor color="#FF0000" alpha=".33"/>
            </s:fill>
        </s:Rect>

        <!-- RELATIVE CONTAINER -->
        <s:BorderContainer id="relativeContainer" width="400" height="400"
                  verticalCenter="0" horizontalCenter="0">

            <s:layout>
                <s:VerticalLayout />
            </s:layout>

            <s:Label id="lbl1"
                     text="Cute Software Engineer 1"
                     fontSize="32" />
            <s:Label id="lbl2"
                     text="Cute Software Engineer 2"
                     fontSize="32" />
            <s:Label id="lbl3"
                     text="Cute Software Engineer 3"
                     fontSize="32" />
        </s:BorderContainer>

        <!-- CONTROLS -->
        <s:HGroup bottom="5" right="5">

            <s:Button id="remove" 
                      label="Remove Element"
                      click="remove_clickHandler(event)"/>
            <s:Button id="replace" bottom="0" right="0"
                      label="Replace Element"
                      click="replace_clickHandler(event)"
                      enabled="false"/>
        </s:HGroup>
    </s:Group>

</s:Application>
...