Go Near Flex Assembly series (IV): Grouping components (BOX), split components (Dividedbox), and container components

Approaching Flex Assembly Series (iv): grouped components (BOX), split component (Dividedbox), and container components (Panel)

This paper mainly introduces the application of Flex Box,dividedbox and panel components.

One, grouping components (BOX)

The box component in Flex is divided into two types, namely VBox and Hbox, namely horizontal group layout and vertical grouping layout. The following is an introduction to each of these two.

Flex's VBox component can automatically help developers to group horizontally at the interface layout, which means that he automatically places the other components placed inside them horizontally, as follows Mxml code:

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>

The main properties are verticalaligh (horizontal alignment), horizontaigap (spacing between inner elements), padding (inner element to four-week spacing), BorderStyle (border style), and so on. Instead, the hbox is grouped vertically, and the following is the sample code:

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>

The following illustration is a screenshot of the running effect: