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

By Minidxer | January 28, 2009

接下来的例子演示了Flex中如何通过verticalGap样式，设置VBox的各项间间距。

让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：


下面是完整代码(或点击这里察看)：

Download: 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>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: VBox | No Comments » | 1,276 views Tags: ,

你可能还对下列文章感兴趣:

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll