Flex - 進度條控制元件

介紹

進度條控制元件為使用者提供了隨著時間推移直觀地顯示任務進度的視覺表示。

類宣告

以下是mx.controls.ProgressBar類的宣告：

public class ProgressBar 
   extends UIComponent 
      implements IFontContextComponent

公共屬性

序號	屬性及描述
1	alignToolTip : String = "Align" 當用戶將滑鼠懸停在文字對齊按鈕上時出現的工具提示。
2	conversion : Number 用於轉換傳入的當前已載入位元組值和已載入總位元組值。
3	direction : String 進度條填充物向完成方向擴充套件的方向。
4	indeterminate : Boolean 進度條控制元件是確定性外觀還是不確定性外觀。
5	label : String 伴隨進度條的文字。
6	labelPlacement : String
7	maximum : Number 進度條的最大進度值。
8	minimum : Number 進度條的最小進度值。
9	mode : String 指定用於更新進度條的方法。
10	percentComplete : Number [只讀] 已完成的程序百分比。範圍為 0 到 100。
11	source : Object 引用進度條正在測量其進度的控制元件。
12	value : Number [只讀] 只讀屬性，包含已取得的進度量 - 在最小值和最大值之間。

公共方法

序號	方法及描述
1	ProgressBar() 建構函式。
2	setProgress(value:Number, total:Number):void 在使用手動模式時，設定進度條的狀態以反映已取得的進度量。

序號

方法及描述

ProgressBar()

建構函式。

setProgress(value:Number, total:Number):void

在使用手動模式時，設定進度條的狀態以反映已取得的進度量。

事件

序號	事件及描述
1	complete 載入完成後排程。
2	hide 當物件的可見狀態從可見變為不可見時排程。
3	progress 在事件或輪詢模式下內容載入時排程。
4	show 元件變為可見時排程。

繼承的方法

此類繼承自以下類的方法：

mx.core.UIComponent
mx.core.FlexSprite
flash.display.Sprite
flash.display.DisplayObjectContainer
flash.display.InteractiveObject
flash.display.DisplayObject
flash.events.EventDispatcher
Object

Flex 進度條控制元件示例

讓我們按照以下步驟，透過建立一個測試應用程式來檢查在 Flex 應用程式中使用進度條控制元件的情況：

步驟	描述
1	按照Flex - 建立應用程式章節中的說明，在一個名為com.tutorialspoint.client的包下建立一個名為HelloWorld的專案。
2	按照下面的說明修改HelloWorld.mxml。保持其餘檔案不變。
3	編譯並執行應用程式，以確保業務邏輯按照要求工作。

以下是修改後的 mxml 檔案src/com.tutorialspoint/HelloWorld.mxml的內容。

<?xml version = "1.0" encoding = "utf-8"?>
<s:Application xmlns:fx = "http://ns.adobe.com/mxml/2009"
   xmlns:s = "library://ns.adobe.com/flex/spark"
   xmlns:mx = "library://ns.adobe.com/flex/mx"
   width = "100%" height = "100%" minWidth = "500" minHeight = "500">
   
   <fx:Style source = "/com/tutorialspoint/client/Style.css" />	
   <fx:Script>
      <![CDATA[
         private var increment:uint = 10;

         private function runProgressBar():void {
            if(increment < =  100) {
               progressBar.setProgress(increment,100);
               progressBar.label =  "Current Progress" + " " + increment + "%";
               increment+ = 10;
            }
            
            if(increment > 100) {
               increment = 0;
            }
         }
      ]]>
   </fx:Script>  
   
   <s:BorderContainer width = "630" height = "480" id = "mainContainer" 
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50" 
         horizontalAlign = "center" verticalAlign = "middle">
         <s:Label id = "lblHeader" text = "Complex Controls Demonstration" 
            fontSize = "40" color = "0x777777" styleName = "heading" />
            
         <s:Panel id = "progressBarPanel" title = "Using ProgressBar" 
            width = "500" height = "300">
            <s:layout>
               <s:VerticalLayout  gap = "10" verticalAlign = "middle" 
                  horizontalAlign = "center" />	
            </s:layout>				
               
            <s:Label color = "0x323232"
               text = "Click the button to start the progress bar." />
            <s:Button id = "btnStart" label = "Start" 
               click = "runProgressBar();" />
               
            <mx:ProgressBar id = "progressBar" 
               labelPlacement = "bottom" minimum = "0" 
               visible = "true" maximum = "100"
               color = "0x323232" label = "CurrentProgress 0%" 
               direction = "right" mode = "manual" width = "90%" />
         </s:Panel>
      </s:VGroup>	 
   </s:BorderContainer>	
</s:Application>

完成所有更改後，讓我們像在Flex - 建立應用程式章節中那樣，在普通模式下編譯並執行應用程式。如果您的應用程式一切正常，它將產生以下結果：[ 線上試用 ]

flex_complex_controls.htm

列印頁面