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:BorderContainerwidth="200" height="75"><s:layout><s:BasicLayout/></s:layout><s:BorderContainerx="20" y="10"width="100%" height="25"backgroundColor="#666666"/></s:BorderContainer><s:BorderContainerwidth="200" height="75"><s:layout><s:BasicLayout/></s:layout><s:BorderContainerleft="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 方法。