走近Flex组件系列(四)：分组组件(Box)、分割组件(DividedBox)和容器组件(Panel)

核心提示：本文主要介绍Flex的Box,DividedBox和Panel组件的应用，一、分组组件(Box)Flex中Box组件分两种，走近Flex组件系列(四)：分组组件(Box)、分割组件(DividedBox)和容器组件(Panel)，即VBox和HBox，也就是水平分组布局和垂直分组布局，所谓的分组也就是他会自动将放置在其

本文主要介绍Flex的Box,DividedBox和Panel组件的应用。

一、分组组件(Box)

Flex中Box组件分两种，即VBox和HBox，也就是水平分组布局和垂直分组布局。下面对这两中分别进行介绍。

Flex的VBox组件可以自动的帮助开发人员在界面布局的时候进行水平分组，所谓的分组也就是他会自动将放置在其内部的其他组件进行水平布局放置，如下mxml代码：

1　　　　　<mx:HBox　x="81"　y="148"　width="219"　height="42"　fontSize="12"　 borderStyle="solid"
2　　　　　　　　　verticalAlign="middle"　horizontalGap="12"　paddingLeft="10">
3　　　　　　　　　<mx:Button　label="按　扭"　fontWeight="normal"/>
4　　　　　　　　　<mx:Button　label="按　扭"　fontWeight="normal"/>
5　　　　　　　　　<mx:CheckBox　label="复选框"/>
6　　　　　</mx:HBox>

其中主要的属性有verticalAligh(水平对齐)、horizontaiGap(内部元素之间的间距)、padding(内部元素到四周的间距)、borderStyle(边框样式)等。　 与其相反的则是HBox垂直分组，以下是示例代码：

1　　　　　<mx:VBox　x="268"　y="21"　width="101"　height="133"　fontSize="12"　 borderStyle="solid"
2　　　　　　　　　verticalGap="12"　horizontalAlign="center">
3　　　　　　　　　<mx:Button　label="按　扭"/>
4　　　　　　　　　<mx:Button　label="按　扭"/>
5　　　　　　　　　<mx:CheckBox　label="复选框"/>
6　　　　　</mx:VBox>