Flex 3 cookbook翻译: 3.1 用布局管理器定位子对象
3 容器
.
容器(containers)这个词通常指的是在Flex框架的mx.containers包里面的所有类。容器扩展自UIComponent类，添加了布局管理功能，用创建法则（creation policies)控制子对象的创建的一系列方法，并自动卷动。各个容器的行为有很大的不同，不过都有定位子对象，用约束或样式布局子对象的能力，并控制卷动，觉得子对象对卷动事件的响应。
对Flex 3而言，约束是个新东西。它们让开发者从位置和尺寸两个方面创建定位的规则，并指派给容器的子对象。只有容器才有约束，比如Canvas容器，Canvas也可以绝对定位，这跟CSS的作用几乎一样。Box和Tile容器提供了子对象的自动布局，还有控制包含在布局管理器里的子对象的方法。
3.1 用布局管理器定位子对象
3.1.1 问题
你需要水平或垂直定位多个子对象，并控制这些子对象的布局。
3.1.2 解答
用HBox或VBox容器，为HBox或VBox设置水平间距（horizontalGap）或垂直间距（verticalGap），相应地，设置组件之间的距离。
3.1.3 讨论
扩展自相同的基类mx.containers.Box, HBox和VBox组件水平地或垂直地布局它们的子对象，他们各自可以包含无数个子对象。 当子对象的尺寸大于Box组件的高或宽时，该Box组件会默认添加相应的滚动条。要确定子对象之间的距离，VBox容器用verticalGap属性，HBox容器用horizontalGap属性。比如：
<mx:VBox width="400" height="300" verticalGap="20"> <mx:Button label="Button"/> <mx:LinkButton label="Link Button"/> </mx:VBox> http://www.agoit.com/bbs/../../../upload/attachment/39141/8ba33d38-0a37-335d-ad5f-29d157e71f81.jpg
可是HBox和VBox容器不考虑上，下，左，右的约束属性。要在子对象和它们的Box容器之间添加空隙，用如下的Spacer控件：
<mx:VBox width="400" height="300" verticalGap="20"> <mx:Button label="Button"/> <mx:ComboBox top="60"/> <mx:Spacer height="20"/> <mx:LinkButton label="Link Button"/> </mx:VBox> http://www.agoit.com/bbs/../../../upload/attachment/39139/3644302b-8ca6-3d20-ad1e-2a9c01c2d966.jpg
要改变子对象的边缘之间的距离或距离填充样式，添加paddingTop, paddingLeft, paddingRight, 或 paddingBottom样式。这会影响到所以添加到容器内的子对象。如果要左右移动VBox里或上下移动HBox里的单个子对象，就在Box里添加一个容器，用他来定位子对象：
<mx:HBox x="400" horizontalGap="10" top="15"> <mx:Canvas> <mx:Button top="50" label="Button" y="20"/> </mx:Canvas> <mx:Panel height="40" width="40"/> <mx:Spacer width="25"/> <mx:LinkButton label="Label"/> <mx:ComboBox/> </mx:HBox> http://www.agoit.com/bbs/../../../upload/attachment/39137/ce1212fe-f67d-32a2-8f05-937fe9360213.jpg
下面这个例子在一个Canvas容器内用到了HBox和VBox来显示以上两种布局方式：
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" > <mx:VBox width="400" height="300" verticalGap="20"> <mx:Button label="Button"/> <mx:ComboBox/> <mx:Spacer height="20"/> <mx:LinkButton label="Link Button"/> </mx:VBox> <mx:HBox x="400" horizontalGap="10" top="15"> <mx:Canvas> <mx:Button top="50" label="Button" y="20"/> </mx:Canvas> <mx:Panel height="40" width="40"/> <mx:Spacer width="25"/> <mx:LinkButton label="Label"/> <mx:ComboBox/> </mx:HBox></mx:Canvas>
页:
[1]