how to move a label in vertical layout to an arbitrary location in flex 4.5?

I know this is very simple for those expert in flex but im just starting out.

开发者_如何学C

For instance i have this:

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

I'd like to move my label say to the upper right?

I can't change my layout to a basic/absolute layout since i want my labels centered in the screen all the time. After a few animations, i'd like to move the label to the upper right.

---

There are a couple of options here(as usual!). The obvious answer would be to ditch the vertical layout and refactor for an absolute layout, using constraints and the horizontalCenter and verticalCenter properties as Harry suggested, then position your element however/whenever you want.

If you absolutely need to keep the vertical layout, another option(more convoluted) would be to create a wrapper (like a group) to wrap your vertically laid out component. Then remove the element from the verticalLayout, set it's positioning and then add it to the wrapper.

I've created a small test project to illustrate the second option. Clicking the buttons located at the bottom removes a label from the vertical layout and adds it to the absolute wrapper positioned top right...you can also click the Replace button to add the element back to the vertical component... HOPE THIS HELPS!

<?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>