现在的位置: 首页 > 综合 > 正文

Flex中如何通过verticalGap样式，设置VBox的各项间间距

2013年01月27日 ⁄ 综合 ⁄ 共 1516字 ⁄ 字号 小 中 大 ⁄ 评论关闭

 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.  
  7.     <mx:Style>
  8.         HSlider {
  9.             dataTipPlacement: bottom;
  10.             dataTipPrecision: 0;
  11.         }
  12.     </mx:Style>
  13.  
  14.     <mx:Script>
  15.         <![CDATA[
  16.             import mx.events.FlexEvent;
  17.             import mx.events.SliderEvent;
  18.  
  19.             private function slider_change(evt:SliderEvent):void {
  20.                 vBox.setStyle("verticalGap", evt.value);
  21.             }
  22.  
  23.             private function vBox_creationComplete(evt:FlexEvent):void {
  24.                 slider.value = vBox.getStyle("verticalGap");
  25.             }
  26.         ]]>
  27.     </mx:Script>
  28.  
  29.     <mx:ApplicationControlBar dock="true">
  30.         <mx:Form styleName="plain">
  31.             <mx:FormItem label="verticalGap:"
  32.                     direction="horizontal">
  33.                 <mx:HSlider id="slider"
  34.                         minimum="0"
  35.                         maximum="20"
  36.                         liveDragging="true"
  37.                         snapInterval="1"
  38.                         tickInterval="1"
  39.                         change="slider_change(event);" />
  40.                 <mx:Label text="{slider.value}" />
  41.             </mx:FormItem>
  42.         </mx:Form>
  43.     </mx:ApplicationControlBar>
  44.  
  45.     <mx:VBox id="vBox"
  46.             width="100%"
  47.             creationComplete="vBox_creationComplete(event);">
  48.         <mx:Box width="100%" height="50" backgroundColor="red" />
  49.         <mx:Box width="100%" height="50" backgroundColor="haloOrange" />
  50.         <mx:Box width="100%" height="50" backgroundColor="yellow" />
  51.         <mx:Box width="100%" height="50" backgroundColor="haloGreen" />
  52.         <mx:Box width="100%" height="50" backgroundColor="haloBlue" />
  53.     </mx:VBox>
  54.  
  55. </mx:Application>
返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞