【HarmonyOS 5】鴻蒙中進度條的使用詳解

一、HarmonyOS中Progress進度條的類型

HarmonyOS的ArkUI框架為開發者提供了多種類型的進度條，每種類型都有其獨特的樣式，以滿足不同的設計需求。以下是幾種常見的進度條類型：

1. 線性進度條（Linear）：這是最常見的進度條樣式，以直線的形式展示進度。從API version 9開始，當組件高度大于寬度時，它會自適應垂直顯示；當高度和寬度相等時，保持水平顯示。

2. 環形無刻度進度條（Ring）：這種進度條呈環形，通過環形圓環的逐漸填充來顯示進度，默認前景色為藍色，默認strokeWidth進度條寬度為2.0vp。

3. 環形有刻度進度條（ScaleRing）：它顯示類似時鐘刻度形式的進度展示效果。在頭尾兩端圓弧處的進度展示效果與圓形樣式（Eclipse）相同，中段處的進度展示效果為矩形狀長條，與線性樣式相似。從API version 9開始，當刻度外圈出現重疊時，它會自動轉換為環形無刻度進度條。

4. 橢圓形進度條（Eclipse）：顯示類似月圓月缺的進度展示效果，從月牙逐漸變化至滿月。

5. 膠囊進度條（Capsule）：頭尾兩端圓弧處的進度展示效果與橢圓形樣式（Eclipse）相同，中段處的進度展示效果與線性樣式（Linear）相同。當高度大于寬度時，它會自適應垂直顯示。

三、使用ArkTS創建和設置進度條

（一）創建進度條

在ArkTS中，我們通過調用Progress接口來創建進度條。以下是創建進度條的基本語法：

Progress({ value: number, total?: number, type?: ProgressType })

（二）設置進度條樣式

我們可以在創建進度條時，通過設置ProgressType枚舉類型給type可選項指定不同的進度條類型，從而實現多樣化的樣式。以下是不同類型進度條的設置示例：

1. 線性進度條：

Progress({ value: 50, total: 100, type: ProgressType.Linear })

2. 環形無刻度進度條：

Progress({ value: 30, total: 100, type: ProgressType.Ring })

3. 環形有刻度進度條：

Progress({ value: 70, total: 100, type: ProgressType.ScaleRing })

4. 橢圓形進度條：

Progress({ value: 10, total: 100, type: ProgressType.Eclipse })

5. 膠囊進度條：

Progress({ value: 45, total: 100, type: ProgressType.Capsule })

（三）動態更新進度

進度條的關鍵功能之一是能夠在任務執行過程中動態更新進度，以反映任務的實時進展。

在鴻蒙Progress組件中通過value和total兩個屬性來實現進度條得更新效果，源碼如下：

其中，value用于設置初始進度值，total用于設置進度總長度，type決定Progress的樣式。如果不設置type，默認使用線性進度條樣式。

Progress({ value: 24, total: 100, type: ProgressType.Linear })

import prompt from '@ohos.prompt';@Entry
@Component
struct DownloadProgressBar {// 下載進度，初始值為 0@State progress: number = 0;// 下載狀態提示信息@State status: string = '等待下載';// 模擬下載的函數startDownload() {// 模擬下載過程，使用 setInterval 定時更新進度let intervalId = setInterval(() => {this.progress += 10;if (this.progress >= 100) {this.status = '下載完成';clearInterval(intervalId);prompt.showToast({ message: '下載已完成' });} else {this.status = `下載中，進度: ${this.progress}%`;}}, 1000);}build() {Column({ space: 20 }) {Text('下載進度條示例').fontSize(20).fontWeight(FontWeight.Bold);Progress({ value: this.progress, total: 100 }).width('90%').height(20);Text(this.status).fontSize(16);Button('開始下載').width('60%').height(40).backgroundColor(Color.Blue).fontColor(Color.White).onClick(() => {this.startDownload();});}.width('100%').height('100%').alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Center);}
}