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>

 

 

 

可是 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>

 

 

 

要改变子对象的边缘之间的距离或距离填充样式，添加 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>

 

 

下面这个例子在一个 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>