问题描述
|
我知道这对于flex方面的专家来说非常简单,但我只是刚开始。
例如我有这个:
<s:Label id=\"lbl2\"
alpha=\"0.0\"
text=\"Cute Software Engineer\"
color=\"#ffffff\"
fontSize=\"32\" />
我想将标签说的话移到右上方吗?
我无法将布局更改为基本/绝对布局,因为我希望标签始终始终位于屏幕的中心。经过几段动画处理后,我想将标签移到右上角。
解决方法
这里有两个选项(照常!)。显而易见的答案是放弃竖向布局并重构为绝对布局,使用Harry所建议的约束以及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>