Flex的进度条（ProgressBar）控件中如何设置进度轨迹条和标签间竖直间隔间距的例子

接下来的例子演示了Flex的进度条（ProgressBar）控件中，如何通过设置

verticalGap样式，来设定进度轨迹条和标签间竖直间隔间距。

让我们先来看一下Demo（

可以右键View Source或点击这里察看源代码

）

：

下面是完整代码(或点击这里查看)：
Download: main.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="top"
backgroundColor="white"
creationComplete="init();">

<mx:Script>
<![CDATA[
import mx.events.SliderEvent;

private function init():void {
slider.value = progressBar.getStyle("verticalGap");
}

private function progressBar_change(evt:SliderEvent):void {
progressBar.setStyle("verticalGap", evt.value);
}
]]>
</mx:Script>

<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="verticalGap:">
<mx:HSlider id="slider"
minimum="0"
maximum="20"
value="3"
liveDragging="true"
snapInterval="1"
tickInterval="1"
change="progressBar_change(event);" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>

<mx:ProgressBar id="progressBar"
mode="manual"
trackColors="[red, red]"
barColor="green"
initialize="progressBar.setProgress(76, 100);" />

</mx:Application>