鴻蒙HarmonyOS實戰-ArkUI元件（Progress）

蜀道山QAQ發表於2024-04-03
鴻蒙UI元件

🚀一、Progress

Progress元件是一種使用者介面（UI）元素，用於向使用者顯示某些任務的進度。它通常以進度條的形式出現，顯示任務完成的百分比。Progress元件可以在確定任務持續時間未知的情況下提供有用的反饋，幫助使用者瞭解任務的狀態和進度。

在Web應用程式中，Progress元件通常是使用HTML5的元素來實現的。元素必須至少包含一個value屬性來指定進度的百分比，以及一個max屬性來指定任務的預期完成時間。可以使用CSS樣式來自定義元素的外觀。

  • 在Android應用程式中，Progress元件通常是使用ProgressBar控制元件來實現的。ProgressBar控制元件可以在水平或垂直方向上顯示進度條，還可以使用自定義顏色和樣式。

  • 在iOS應用程式中，Progress元件通常是使用UIProgressView控制元件來實現的。UIProgressView控制元件可以在水平或垂直方向上顯示進度條，還可以使用自定義顏色和樣式。

  • 在HarmonyOS應用程式中，Progress元件通常是使用Progress控制元件來實現的。Progress控制元件可以在水平或垂直方向上顯示進度條，還可以使用自定義顏色和樣式。

🔎1.建立進度條

語法說明：

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

使用：

// xxx.ets
import promptAction from '@ohos.promptAction';
@Entry
@Component
struct Index {
  build() {
    Column() {
      Row() {
        Progress({ value: 24, total: 100, type: ProgressType.Linear })
      }
      Row() {

      }
      .backgroundColor(0xFFFFFF)
    }
    .padding(10)
    .backgroundColor(0xDCDCDC)
    .width('100%')
    .height('100%')
  }
}

image

🔎2.設定進度條樣式

image

🦋2.1 線性樣式

@Entry
@Component
struct Index {
  build() {
    Column() {
      Progress({ value: 20, total: 100, type: ProgressType.Linear }).width(200).height(50)
      Progress({ value: 20, total: 100, type: ProgressType.Linear }).width(50).height(200)
    }
    .padding(10)
    .backgroundColor(0xDCDCDC)
    .width('100%')
    .height('100%')
  }
}

image

🦋2.2 環形無刻度樣式

@Entry
@Component
struct Index {
  build() {
    Column() {
      // 從左往右，1號環形進度條，預設前景色為藍色，預設strokeWidth進度條寬度為2.0vp
      Progress({ value: 40, total: 150, type: ProgressType.Ring }).width(100).height(100)
      // 從左往右，2號環形進度條
      Progress({ value: 40, total: 150, type: ProgressType.Ring }).width(100).height(100)
        .color(Color.Grey)    // 進度條前景色為灰色
        .style({ strokeWidth: 15})    // 設定strokeWidth進度條寬度為15.0vp
    }
    .padding(10)
    .backgroundColor(0xDCDCDC)
    .width('100%')
    .height('100%')
  }
}

image

🦋2.3 環形有刻度樣式

@Entry
@Component
struct Index {
  build() {
    Column() {
      Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }).width(100).height(100)
        .backgroundColor(Color.Black)
        .style({ scaleCount: 20, scaleWidth: 5 })    // 設定環形有刻度進度條總刻度數為20，刻度寬度為5vp
      Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }).width(100).height(100)
        .backgroundColor(Color.Black)
        .style({ strokeWidth: 15, scaleCount: 20, scaleWidth: 5 })    // 設定環形有刻度進度條寬度15，總刻度數為20，刻度寬度為5vp
      Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }).width(100).height(100)
        .backgroundColor(Color.Black)
        .style({ strokeWidth: 15, scaleCount: 20, scaleWidth: 3 })    // 設定環形有刻度進度條寬度15，總刻度數為20，刻度寬度為3vp
    }
    .padding(10)
    .backgroundColor(0xDCDCDC)
    .width('100%')
    .height('100%')
  }
}

image

🦋2.4 圓形樣式

@Entry
@Component
struct Index {
  build() {
    Column() {
      // 從左往右，1號圓形進度條，預設前景色為藍色
      Progress({ value: 10, total: 150, type: ProgressType.Eclipse }).width(100).height(100)
      // 從左往右，2號圓形進度條，指定前景色為灰色
      Progress({ value: 20, total: 150, type: ProgressType.Eclipse }).color(Color.Grey).width(100).height(100)
    }
    .padding(10)
    .backgroundColor(0xDCDCDC)
    .width('100%')
    .height('100%')
  }
}

image

🦋2.5 膠囊樣式

@Entry
@Component
struct Index {
  build() {
    Column() {
      Progress({ value: 10, total: 150, type: ProgressType.Capsule }).width(100).height(50)
      Progress({ value: 20, total: 150, type: ProgressType.Capsule }).width(50).height(100).color(Color.Grey)
      Progress({ value: 50, total: 150, type: ProgressType.Capsule }).width(50).height(100).backgroundColor(Color.Black)
    }
    .padding(10)
    .backgroundColor(0xDCDCDC)
    .width('100%')
    .height('100%')
  }
}

image

🔎3.案例

Progress元件通常用於展示某個任務或者程序的進度，可以向使用者傳達當前操作的進展情況。以下是Progress元件的一些實際應用場景：

  1. 檔案上傳或下載的進度條展示
  2. 音影片播放器中的播放進度條
  3. 遊戲中的載入進度條
  4. 網頁載入進度條
  5. 軟體安裝或更新的進度條展示
  6. 資料庫操作的進度條展示
  7. 任務管理系統中的進度展示
  8. 專案管理系統中的任務進度展示

Progress元件可以直觀地展示某個任務的完成情況，幫助使用者瞭解任務的進度及剩餘時間，提高使用者體驗和操作效率。

案例：

@Entry
@Component
struct Index {
  @State progressValue: number = 0    // 設定進度條初始值為0
  build() {
    Column() {
      Column() {
        Progress({value:0, total:100, type:ProgressType.Capsule}).width(200).height(50)
          .style({strokeWidth:50}).value(this.progressValue)
        Row().width('100%').height(5)
        Button("進度條+5")
          .onClick(()=>{
            this.progressValue += 5
            if (this.progressValue > 100){
              this.progressValue = 0
            }
          })
      }
    }.width('100%').height('100%')
  }
}

image

🚀寫在最後

  • 如果你覺得這篇內容對你還蠻有幫助，我想邀請你幫我三個小忙：
  • 點贊，轉發，有你們的 『點贊和評論』，才是我創造的動力。
  • 關注小編，同時可以期待後續文章ing🚀，不定期分享原創知識。
  • 更多鴻蒙最新技術知識點，請關注作者部落格：https://t.doruo.cn/14DjR1rEY

image

相關文章