3.1.使用布局管理器布置子组件

3.1.1 问题
我们需要从横向或纵向来布置多种不同类型的子组件并且控制它们的布局。
3.1.2 解决办法
使用HBox 或者HBox 容器,并且分别为HBox 或者HBox 设置horizontalGap 或者verticalGap风格属性,达到设置控件之间间距的目的。
3.1.3 讨论
通过扩展普通mx.containers.Box 基类,HBox 和Vbox 组件分别从横向或者纵向布置它们的子组件,并且它们可以拥有的子组件个数没有限制。当子组件的尺寸大于Box 控件的宽或者高的时候,默认情况下,Box 会自动添加滚动条。Vbox 容器使用verticalGap 属性而Hbox则使用horizontalGap 来分别设置各自的子组件间距。例如:
+展开
-XML
<mx:VBox width="400height="300verticalGap="20">
<mx:Button label="Button"/>
<mx:LinkButton label="Link Button"/>
</mx:VBox>

然而,HBox 和VBox 容器却不遵守bottom、left、right 或top 这几个约束条件。我们可以像下面的例子这样,在Box 内的子组件之间加上Spacer 控件:
+展开
-XML
<mx:VBox width="400height="300verticalGap="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内移动到上边或下边,则需要添加一个内部容器来使用这些属性布置该子组件:
+展开
-XML
<mx:HBox x="400horizontalGap="10top="15">
<mx:Canvas>
<mx:Button top="50label="Buttony="20"/>
</mx:Canvas>
<mx:Panel height="40width="40"/>
<mx:Spacer width="25"/>
<mx:LinkButton label="Label"/>
<mx:ComboBox/>
</mx:HBox>

下面的这个例子在Canvas 中同时使用了HBox 和VBox 来演示多种布局方式:
+展开
-XML
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" >
<mx:VBox width="400height="300verticalGap="20">
<mx:Button label="Button"/>
<mx:ComboBox/>
<mx:Spacer height="20"/>
<mx:LinkButton label="Link Button"/>
</mx:VBox>
<mx:HBox x="400horizontalGap="10top="15">
<mx:Canvas>
<mx:Button top="50label="Buttony="20"/>
</mx:Canvas>
<mx:Panel height="40width="40"/>
<mx:Spacer width="25"/>
<mx:LinkButton label="Label"/>
<mx:ComboBox/>
</mx:HBox>
</mx:Canvas>

加支付宝好友偷能量挖...


评论(0)网络
阅读(74)喜欢(0)flash/flex/fcs/AIR