flex4中推荐使用spark组件来布局,所以在工具箱里把HDividedBox,VDividedBox这二个非常有用的东东给隐藏掉了,只能手动在source视图下手动写标签,如下:
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="400" minHeight="300"> <fx:Style> @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/mx"; global{font-size:18px;font-family:"微软雅黑"} </fx:Style> <s:Group right="20" left="20" top="20" bottom="20"> <s:layout> <s:VerticalLayout/> </s:layout> <mx:HDividedBox width="100%" height="50%"> <s:TextArea text="左边的文本框" height="100%" width="50%" contentBackgroundColor="#F3EEEE"/> <s:TextArea text="右边的文本框" height="100%" width="50%" chromeColor="#C3EBB6" contentBackgroundColor="#F3EEEE"/> </mx:HDividedBox> <mx:VDividedBox width="100%" height="50%"> <s:TextArea text="上面的文本框" width="100%" height="50%" chromeColor="#F0E676" contentBackgroundColor="#F0E676"/> <s:TextArea text="下面的文本框" width="100%" height="50%" contentBackgroundColor="#F0E676"/> </mx:VDividedBox> </s:Group> </s:Application>
效果图
![](https://pic002.cnblogs.com/images/2011/27612/2011040710561988.png)