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

核心提示： 下图为运行效果截图：二、分割组件(DividedBox)Flex中的DividedBox组件也分两种，即VDividedBox和HDividedBox，走近Flex组件系列(四)：分组组件(Box)、分割组件(DividedBox)和容器组件(Panel)(2)，如果你阅读过《Flex与.

下图为运行效果截图：　　

二、分割组件(DividedBox)

Flex中的DividedBox组件也分两种，即VDividedBox和HDividedBox。　如果你阅读过《Flex与.NET互操作》系列文章中的Flex与.NET互操作(五)：使用FileReference+HttpHandler实现文件上传/下载 便会发现，里面就用到了HDividedBox组件，运行效果如图：

图片看不清楚？请点击这里查看原图（大图）。

如上图，将显示画面分隔为左右两部分，这就是使用HDividedBox组件的效果，有了水平分隔（左右分隔）那当然也有垂直分隔（上下分隔）了。要实现垂直分隔则需要使用VDividedBox组件来实现。详细请参考下面示例代码：

　1　　　　　<mx:HDividedBox　x="10"　y="180"　width="300"　height="100"　fontSize="12"　
　2　　　　　　　　　borderStyle="solid"　borderColor="#2278E1">
　3　　　　　　　　　<mx:Canvas　width="100"　height="100%"　backgroundColor="#F4F6FE">　　　　
　4　　　　　　　　　　　　　<mx:Button　x="17"　y="42"　label="Button"　fontWeight="normal"/>
　5　　　　　　　　　</mx:Canvas>
　6　　　　　　　　　<mx:Canvas　width="200"　height="100%"　backgroundColor="#EBF0F9">
　7　　　　　　　　　　　　　<mx:Button　x="33"　y="40"　label="Button"　fontWeight="normal"/>
　8　　　　　　　　　</mx:Canvas>
　9　　　　　</mx:HDividedBox>
10　　　　　<mx:VDividedBox　x="10"　y="288"　width="300"　height="150"　fontSize="12"　borderStyle="solid">
11　　　　　　　　　<mx:Canvas　width="100%"　height="50"　backgroundColor="#FAF9FF">
12　　　　　　　　　　　　　<mx:Button　x="20"　y="18"　label="Button"　fontWeight="normal"/>
13　　　　　　　　　</mx:Canvas>
14　　　　　　　　　<mx:Canvas　width="100%"　backgroundColor="#FAF9FF">
15　　　　　　　　　　　　　<mx:Button　x="23"　y="25"　label="Button"　fontWeight="normal"/>
16　　　　　　　　　</mx:Canvas>
17　　　　　</mx:VDividedBox>