Flex中如何利用labelPlacement属性，textAlign以及labelWidth样式设置进度条ProgressBar标签文本对齐方式的例子

By Minidxer | October 13, 2008

接下来的例子演示了Flex中如何利用labelPlacement属性，textAlign以及labelWidth样式，设置进度条ProgressBar标签文本对齐方式。

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


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

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application name="ProgressBar_textAlign_test"
  3.         xmlns:mx="http://www.adobe.com/2006/mxml"
  4.         layout="vertical"
  5.         verticalAlign="middle"
  6.         backgroundColor="white">
  7.  
  8.     <mx:Script>
  9.         <![CDATA[
  10.             import flash.text.TextFormatAlign;
  11.             import mx.controls.ProgressBarLabelPlacement;
  12.             import mx.events.ListEvent;
  13.  
  14.             private function adjustLabelWidth():void {
  15.                 var lWidth:Number;
  16.                 switch (labelPlacementComboBox.selectedItem.label) {
  17.                     case ProgressBarLabelPlacement.LEFT:
  18.                     case ProgressBarLabelPlacement.RIGHT:
  19.                         lWidth = NaN;
  20.                         break;
  21.                     default:
  22.                         lWidth = progressBar.width;
  23.                         break;
  24.                 }
  25.                 progressBar.setStyle("labelWidth", lWidth);
  26.             }
  27.         ]]>
  28.     </mx:Script>
  29.  
  30.     <mx:Array id="labelPlacementDP">
  31.         <mx:Object label="{ProgressBarLabelPlacement.LEFT}" />
  32.         <mx:Object label="{ProgressBarLabelPlacement.RIGHT}" />
  33.         <mx:Object label="{ProgressBarLabelPlacement.TOP}" />
  34.         <mx:Object label="{ProgressBarLabelPlacement.BOTTOM}" />
  35.         <mx:Object label="{ProgressBarLabelPlacement.CENTER}" />
  36.     </mx:Array>
  37.  
  38.     <mx:Array id="textAlignDP">
  39.         <mx:Object label="{TextFormatAlign.LEFT}" />
  40.         <mx:Object label="{TextFormatAlign.CENTER}" />
  41.         <mx:Object label="{TextFormatAlign.RIGHT}" />
  42.     </mx:Array>
  43.  
  44.     <mx:ApplicationControlBar dock="true">
  45.         <mx:Form styleName="plain">
  46.             <mx:FormItem label="labelPlacement:">
  47.                 <mx:ComboBox id="labelPlacementComboBox"
  48.                         dataProvider="{labelPlacementDP}"
  49.                         selectedIndex="3"
  50.                         change="adjustLabelWidth();"/>
  51.             </mx:FormItem>
  52.             <mx:FormItem label="textAlign:">
  53.                 <mx:ComboBox id="textAlignComboBox"
  54.                         dataProvider="{textAlignDP}"
  55.                         change="adjustLabelWidth();" />
  56.             </mx:FormItem>
  57.         </mx:Form>
  58.     </mx:ApplicationControlBar>
  59.  
  60.     <mx:ProgressBar id="progressBar"
  61.             indeterminate="true"
  62.             labelPlacement="{labelPlacementComboBox.selectedItem.label}"
  63.             textAlign="{textAlignComboBox.selectedItem.label}"
  64.             width="200" />
  65.  
  66. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: ProgressBar | No Comments » | Tags: , , ,

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

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll