Flex4.5用HBox和VBox布局（娱乐QQ窗口）

做了一个QQ的界面，大家看完这节，争取都能自己布局！
代码如下：
<?xml version="1.0" encoding="utf-8"?>
<control:QQAS xmlns:fx="http://ns.adobe.com/mxml/2009"
     xmlns:s="library://ns.adobe.com/flex/spark"
     xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:control="control.*" width="582" height="508" skinClass="skins.IndexTitleWinSkin">
 <fx:Declarations>
  <!-- 将非可视元素（例如服务、值对象）放在此处 -->
 </fx:Declarations>
 <mx:HBox width="100%" height="100%" horizontalGap="0">
  <mx:VBox width="382" height="100%" verticalGap="0">
   <mx:HBox width="100%" height="65%" paddingRight="5">
    <s:TextArea verticalScrollPolicy="on" width="100%" height="100%"/>
   </mx:HBox>
   <mx:HBox height="6%" width="100%" paddingRight="6">
    <s:Image width="375" source="image/字体等.png"/>
   </mx:HBox>
   <mx:HBox height="22%" width="100%" paddingRight="6">
    <s:TextArea width="100%" height="100%"/>
   </mx:HBox>
   <mx:HBox width="100%" height="7%" paddingRight="8" backgroundColor="#CBE1EE">
    <mx:HBox width="50%" height="100%" paddingLeft="7" paddingBottom="2" verticalAlign="bottom">
     <s:Label text="儿童动画屋，精彩不容错过！"/>
    </mx:HBox>
    <mx:HBox width="50%" height="100%" paddingBottom="2" paddingLeft="24" verticalAlign="bottom">
     <mx:Button width="67" label="关闭(C)" chromeColor="#FBF5F5" cornerRadius="4"/>
     <mx:ComboBox width="77" chromeColor="#FAF5F5" cornerRadius="2" editable="true"
         enabled="true" prompt="发送(S)"/>
    </mx:HBox>
   </mx:HBox>
  </mx:VBox>
  <mx:VBox width="40%" height="100%" verticalGap="0" borderStyle="solid">
   <mx:HBox width="100%" height="48">
    <s:Image source="image/群动态.png"/>
   </mx:HBox>
   <mx:HBox width="100%" height="29%">
    <s:TextArea width="100%" height="100%"/>
   </mx:HBox>
   <mx:HRule width="100%"/>
   <mx:HBox width="100%" height="5.4%" horizontalAlign="right" verticalAlign="middle">
    <s:Label color="#346284" text="查看历史公告》"/>
   </mx:HBox>
   <mx:HBox width="100%" height="7%" paddingLeft="3" verticalAlign="middle"  backgroundColor="#CBE1EE">
    <s:Label text="群成员(250/250)"/>
   </mx:HBox>
   <mx:HBox width="100%">
    <s:TextArea width="198" height="211" verticalScrollPolicy="on"/>
   </mx:HBox>
  </mx:VBox>
 </mx:HBox>
</control:QQAS>
嘿嘿，懒了一下，有的只是增加了image。
这个代码是mxml组件的代码，大家可以看到这个组件是基于</control:QQAS>这个as的，所以在建这个组件的时候，要先建这个
as文件，然后再建mxml基于as的，这样做的好处是，代码分离，逻辑部分和布局部分不在一起，看起来清晰。布局主要用的是
HBox和VBox，然后是基于TitleWindow的，代码可以看出来。这其中的细节你们自己去摸索，这样理解的才更深刻。我只提一下，
image组件运用的时候，建立一个image包，然后图片直接复制进image包即可，组件里面点“源”，然后就能找到你想要的图片
了。
下面是皮肤需要改的部分，由于代码太多，我就把改的部分代码发下：
 <!--- layer 0: title bar fill @private -->
                <s:Rect id="tbFill" left="0" right="0" top="0" bottom="1" height="54">
                    <s:fill>
                        <s:LinearGradient >
                            <s:GradientEntry color="0xBDCBEF"
                                             color.inactiveGroup="0xBDCBEF"/>
                            <s:GradientEntry color="0xDFE5F6"
                                             color.inactiveGroup="0xDFE5F6"/>
                        </s:LinearGradient>
                    </s:fill>
                </s:Rect>
                <s:Image source="image/标题.png" />只是多加了一句这个，标题就变成想要的那个了。
好了，把运行结果发一下，大家自己对照代码就知道，我image截取的是哪部分了，当然你们可以不用image，一个一个的组件添加，
以后我会做一个完整版的，不会用image~!
结果如图： 

 

对了，由于是在组件里面写的代码，所以不能运行，我们得新建一个应用程序来运行这个组件，我是用一个button通过点击运行这个组件，
把这个代码发一下，还好我细心，要不你们运行不了还不得诅咒我。。。
<?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="955" minHeight="600">
 
 <fx:Script>
  <![CDATA[
   import mx.managers.PopUpManager;
   
   import view.QQxmxl;
   protected function btn1_clickHandler(event:MouseEvent):void
   {
    var test1:QQxmxl = new QQxmxl;
    PopUpManager.addPopUp(test1,this,true);
    PopUpManager.centerPopUp(test1);
   }
  ]]>
 </fx:Script>
 
 <fx:Declarations>
  <!-- 将非可视元素（例如服务、值对象）放在此处 -->
 </fx:Declarations>
 <mx:Button id="btn1" label="第一个"
      click="btn1_clickHandler(event)" fontFamily="中易宋体" fontSize="20"/>
</s:Application>

好了，今天就到这里了，大家自己去对位，毕竟自己摸索才能印象深刻，我只是起到了一个抛砖引玉的作用！