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

本文介绍了一个使用Flex布局的Flash应用程序示例,通过ComboBox选择水平或垂直布局并实时更新Box容器内的Image组件排列方式。该应用展示了如何利用Flex框架实现响应式界面设计。

main.mxml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Applicationxmlns: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:ApplicationControlBardock="true">
  31. <mx:FormstyleName="plain">
  32. <mx:FormItemlabel="direction:">
  33. <mx:ComboBoxid="comboBox"
  34. initialize="comboBox_init();"
  35. change="comboBox_change(event);"/>
  36. </mx:FormItem>
  37. </mx:Form>
  38. </mx:ApplicationControlBar>
  39. <mx:Boxid="box" direction="horizontal" styleName="myBox">
  40. <mx:Imagesource="Button.png" toolTip="Button" />
  41. <mx:Imagesource="ButtonBar.png" toolTip="ButtonBar" />
  42. <mx:Imagesource="CheckBox.png" toolTip="CheckBox" />
  43. <mx:Imagesource="ColorPicker.png" toolTip="ColorPicker" />
  44. <mx:Imagesource="ComboBox.png" toolTip="ComboBox" />
  45. </mx:Box>
  46. </mx:Application>
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值