Flex 学习之路之十 用户接口user interface整体布局

<?xml version="1.0"?>
<!-- containers\application\AppSizePercent.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
width="100%" height="100%">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:Panel title="Main Application" width="100%" height="100%">
<mx:HDividedBox width="100%" height="100%">
<s:TextArea text="TA1" width="50%" height="100%"/>
<mx:VDividedBox width="50%" height="100%">
<s:TextArea text="TA2" width="100%" height="75%"/>
<s:TextArea text="TA3" width="100%" height="75%"/>
</mx:VDividedBox>
</mx:HDividedBox>
</s:Panel>
</s:Application>

这个我喜欢，一直在想怎么做个整体的布局，这个可以借鉴下

首先是左右分，然后是上下分

HDividedBox 容器像 HBox 容器一样水平放置其子项，但会在各子项的间隔之间插入可拖动的分隔符。用户可以通过拖动此分隔符来调整分配给各子项的区域大小。<mx:HDividedBox/> 标签与 <mx:DividedBox direction="horizontal"/> 相同。

HDividedBox 容器具有以下默认大小特征：

特征	说明
默认大小	宽度足以容纳使用默认宽度或明确指定的宽度时的所有子项、子项间的任何水平间隔，以及容器的左右填充。高度为最高子项的默认高度或明确指定的高度与容器的上下填充之和。
默认填充	上、下、左、右的值均为 0 像素。
默认间距	水平和垂直间距为 10 像素。