Flex中如何改变ProgressBar控件轨道栏高度的例子

By Minidxer | September 4, 2008

接下来的例子演示了Flex中如何改变ProgressBar控件轨道栏高度。Demo中通过调整trackHeight来调节高度，通过labelPlacement调整标签的位置。

让我们先来看一下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:Script>
  8.         <![CDATA[
  9.             import mx.events.SliderEvent;
  10.             import mx.controls.ProgressBarLabelPlacement;
  11.  
  12.             private function slider_change(evt:SliderEvent):void {
  13.                 progressBar.setStyle("trackHeight", evt.value);
  14.             }
  15.         ]]>
  16.     </mx:Script>
  17.  
  18.     <mx:XML id="labelPlacementXML">
  19.         <items>
  20.             <item>
  21.                 <label>ProgressBarLabelPlacement.BOTTOM</label>
  22.                 <data>{ProgressBarLabelPlacement.BOTTOM}</data>
  23.             </item>
  24.             <item>
  25.                 <label>ProgressBarLabelPlacement.CENTER</label>
  26.                 <data>{ProgressBarLabelPlacement.CENTER}</data>
  27.             </item>
  28.             <item>
  29.                 <label>ProgressBarLabelPlacement.TOP</label>
  30.                 <data>{ProgressBarLabelPlacement.TOP}</data>
  31.             </item>
  32.             <item>
  33.                 <label>ProgressBarLabelPlacement.LEFT</label>
  34.                 <data>{ProgressBarLabelPlacement.LEFT}</data>
  35.             </item>
  36.             <item>
  37.                 <label>ProgressBarLabelPlacement.RIGHT</label>
  38.                 <data>{ProgressBarLabelPlacement.RIGHT}</data>
  39.             </item>
  40.         </items>
  41.     </mx:XML>
  42.  
  43.     <mx:ApplicationControlBar dock="true">
  44.         <mx:Label text="trackHeight:" />
  45.         <mx:HSlider id="slider"
  46.                 minimum="0"
  47.                 maximum="32"
  48.                 value="{NaN}"
  49.                 liveDragging="true"
  50.                 snapInterval="1"
  51.                 tickInterval="4"
  52.                 dataTipPrecision="0"
  53.                 width="100"
  54.                 change="slider_change(event);" />
  55.  
  56.         <mx:Spacer width="100%" />
  57.  
  58.         <mx:Label text="labelPlacement:" />
  59.         <mx:ComboBox id="comboBox"
  60.                 dataProvider="{labelPlacementXML.item}" />
  61.     </mx:ApplicationControlBar>
  62.  
  63.     <mx:ProgressBar id="progressBar"
  64.             mode="manual"
  65.             labelPlacement="{comboBox.selectedItem.data}"
  66.             creationComplete="progressBar.setProgress(35, 100);" />
  67.  
  68. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: Flex | Tags: , , ,

Related Post

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll

Sponsored Ads