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

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

本文主要介紹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>

下圖為運行效果截圖：