Box(HBox VBox)--组件箱

来源：互联网发布：淘宝晚班异地客服编辑：程序博客网时间：2024/04/29 17:01

下面介绍 Box中的HBox、VBox组件的使用. 新建MXML文件，命令为BoxHV.mxml。下面为此文件的详细代码。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"    verticalAlign="middle" horizontalAlign="center"
     backgroundGradientColors="[0x000000,0x323232]" paddingTop="0"
     fontFamily="Arial" fontSize="12"
>
<mx:Panel title="水平组件箱" layout="vertical" color="0xffffff" borderAlpha="0.15"
         paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10"            horizontalAlign="center">
    <mx:Label width="356" color="0x323232" textAlign="center"
            text="下面是一个水平组件箱,存入在它里面的组件排列方式是以水平排列"/>
    <mx:HBox borderStyle="solid" paddingTop="10" paddingBottom="10"
           paddingLeft="10" paddingRight="10" color="0x707070">
      <mx:Button label="按钮1"/>
      <mx:Button label="按钮2"/>
      <mx:Button label="按钮3"/>
    </mx:HBox>
</mx:Panel>

<mx:Panel title="垂直组件箱" layout="vertical" color="0xffffff" borderAlpha="0.15"
  paddingTop="20" paddingRight="10" paddingBottom="10" paddingLeft="10"   horizontalAlign="center">
    <mx:Label width="356" color="0x323232" textAlign="center"
         text="下面是一个垂直组件箱,存入在它里面的组件排列方式是以垂直排列"/>
    <mx:VBox borderStyle="solid" paddingTop="10" paddingBottom="10"
            paddingLeft="10" paddingRight="10" color="0x707070">
      <mx:Button label="按钮1"/>
      <mx:Button label="按钮2"/>
      <mx:Button label="按钮3"/>
    </mx:VBox>
</mx:Panel>
</mx:Application>
运行后截图：

组件箱