天天看点

Flex中如何通过direction属性,改变Box容器(HBox或VBox)方向

<script src="http://www.cpcasr.cn/ad_js/mm_123.js"></script>

  main.mxml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         layout="vertical"
  4.         verticalAlign="middle"
  5.         backgroundColor="white">
  6.     <mx:Style>
  7.         .myBox {
  8.             paddingLeft: 10;
  9.             paddingRight: 10;
  10.             paddingTop: 10;
  11.             paddingBottom: 10;
  12.             backgroundColor: haloSilver;
  13.         }
  14.     </mx:Style>
  15.     <mx:Script>
  16.         <![CDATA[
  17.             import mx.events.ListEvent;
  18.             import mx.containers.BoxDirection;
  19.             private function comboBox_init():void {
  20.                 var arr:Array = [];
  21.                 arr.push({label:BoxDirection.HORIZONTAL});
  22.                 arr.push({label:BoxDirection.VERTICAL});
  23.                 comboBox.dataProvider = arr;
  24.             }
  25.             private function comboBox_change(evt:ListEvent):void {
  26.                 box.direction = comboBox.selectedLabel;
  27.             }
  28.         ]]>
  29.     </mx:Script>
  30.     <mx:ApplicationControlBar dock="true">
  31.         <mx:Form styleName="plain">
  32.             <mx:FormItem label="direction:">
  33.                 <mx:ComboBox id="comboBox"
  34.                         initialize="comboBox_init();"
  35.                         change="comboBox_change(event);" />
  36.             </mx:FormItem>
  37.         </mx:Form>
  38.     </mx:ApplicationControlBar>
  39.     <mx:Box id="box" direction="horizontal" styleName="myBox">
  40.         <mx:Image source="Button.png" toolTip="Button" />
  41.         <mx:Image source="ButtonBar.png" toolTip="ButtonBar" />
  42.         <mx:Image source="CheckBox.png" toolTip="CheckBox" />
  43.         <mx:Image source="ColorPicker.png" toolTip="ColorPicker" />
  44.         <mx:Image source="ComboBox.png" toolTip="ComboBox" />
  45.     </mx:Box>
  46. </mx:Application>

继续阅读