MX Box HBox and VBox layout containers

    Box布局容器使子控件按一行排列或按一列排列。可使用direction属性来决定是竖向排列还是水平排列。HBox和VBox

容器的属性分别是horizontal和verticaldirection。Adoble推荐使用Spark containers中的HorizontalLayout和VerticalLayout

代替MX中的box conatainer.

    若要多行多列地排列子控件，可以使用Tile或Grid容器。  

    例  令Box的direction属性为vertical 达到VBox的效果

<?xml version="1.0"?>
<!-- containers\layouts\BoxSimple.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">
<mx:Box direction="vertical"
    borderStyle="solid"
    paddingTop="10"
    paddingBottom="10"
    paddingLeft="10"
    paddingRight="10">
    <mx:Button id="fname" label="Button 1"/>
    <mx:Button id="lname" label="Button 2"/>
    <mx:Button id="addr1" label="Button 3"/>
    <mx:ComboBox id="state">
    <mx:ArrayList>
        <fx:String>ComboBox 1</fx:String>
        <fx:String>ComboBox 2</fx:String>
    </mx:ArrayList>
    </mx:ComboBox>
</mx:Box>

</s:Application>

 运行

例 使用VBox

<?xml version="1.0"?>
<!-- containers\layouts\VBoxSimple.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">
<mx:VBox borderStyle="solid"
    paddingTop="10"
    paddingBottom="10"
    paddingLeft="10"
    paddingRight="10">
    <mx:Button id="fname" label="Button 1"/>
    <mx:Button id="lname" label="Button 2"/>
    <mx:Button id="addr1" label="Button 3"/>
    <mx:ComboBox id="state">
    <mx:ArrayList>
        <fx:String>ComboBox 1</fx:String>
        <fx:String>ComboBox 1</fx:String>
    </mx:ArrayList>
    </mx:ComboBox>
</mx:VBox>

</s:Application> 

  运行