Flex 学习之路之八 用户接口user interface 位置大小的设置

<?xml version="1.0"?>
<!-- components\PercentHBoxChildren.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark">
<s:BorderContainer width="400" height="25">
<s:layout>
<s:HorizontalLayout/>
</s:layout>
<s:Button id="b1" label="Label 1" width="25%"/>
<s:Button id="b2" label="Label 2" width="40%"/>
<s:Button id="b3" label="Label 3"/>
</s:BorderContainer>
</s:Application>

在窗口容器的设置中，可以通过百分比或数字来设置控件的宽度和高度

<?xml version="1.0"?>
<!-- components\PercentSizeAbsPosit.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark">
<s:layout>
<s:VerticalLayout gap="25"/>
</s:layout>
<s:BorderContainer
width="200" height="75">
<s:layout>
<s:BasicLayout/>
</s:layout>
<s:BorderContainer
x="20" y="10"
width="100%" height="25"
backgroundColor="#666666"/>
</s:BorderContainer>
<s:BorderContainer
width="200" height="75">
<s:layout>
<s:BasicLayout/>
</s:layout>
<s:BorderContainer
left="20" top="10"
width="100%" height="25"
backgroundColor="#666666"/>
</s:BorderContainer>
</s:Application>

也可以通过绝对位置来设置控件的位置

<?xml version="1.0"?>
<!-- components\DisableVBoxLayout.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<mx:VBox id="vb1" autoLayout="false"
width="200"
height="200">
<s:Button id="b1"
label="Button 1"/>
<s:Button id="b2"
label="Button 2"
click="{b2.x += 10; vb1.invalidateDisplayList();}"/>
<s:Button id="b3"
label="Button 3"
creationComplete="b3.x = 100; b3.y = 75;"/>
</mx:VBox>
</s:Application>上面的这个有一个点击事件，可以动态地改变按钮2的位置。
invalidateDisplayList()为标记组件，以便在稍后屏幕更新期间调用该组件的

updateDisplayList()

方法，

官方的解释为：

Invalidation 是一个很有用的机制，可将组件更改延迟到稍后屏幕更新时进行处理，从而消除了重复的工作。例如，要更改宽度和高度，如果在更改宽度后立即更新组件，然后在设置新高度后再次更新组件，就有些浪费。更改两个属性后再使用新的大小一次性呈示组件，效率会更高。

很少调用 Invalidation 方法。通常，在组件上设置属性会自动调用合适的 invalidation 方法。