如何将垂直布局中的标签移动到flex 4.5中的任意位置？

Question

我知道这对于 Flex 专家来说非常简单，但我才刚刚开始。

例如我有这个：

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

我想将我的标签移动到右上角？

我无法将布局更改为基本/绝对布局，因为我希望标签始终位于屏幕中央。几个动画之后，我想将标签移动到右上角。

Answer 1

这里有几个选项（像往常一样！）。显而易见的答案是放弃垂直布局并重构为绝对布局，按照 Harry 的建议使用约束以及 Horizo​​ntalCenter 和 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>