OpenHarmony ETS UI 組件封裝之環形進度條

作者：滿康敏 2022-04-24 14:56:53

系統 OpenHarmony

本文介紹的是如何使用 TS 的容器組件 Stack 和繪制組件 Shape、Circle 封裝一個環形進度條。進度條主要由灰色背景環、藍色進度環、進度文字三部分組成。

??想了解更多內容，請訪問：??

??51CTO OpenHarmony技術社區??

??https://ost.51cto.com??

概述

基礎組件介紹

1.Stack

堆疊容器，子組件按照順序依次入棧，后一個子組件覆蓋前一個子組件。

Stack(value:{alignContent?: Alignment})

alignContent：設置子組件在容器內的對齊方式

Alignment枚舉說明

參考文檔路徑：

https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-container-stack.md。

2.Shape

繪制組件的父組件，父組件中會描述所有繪制組件均支持的通用屬性。繪制組件使用Shape作為父組件，實現類似SVG的效果。

屬性：

LineCapStyle枚舉說明：

LineJoinStyle枚舉說明：

參考文檔路徑：

https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-shape.md。

3.Circle

圓形繪制組件。

屬性：

參考文檔路徑：

https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-circle.md。

繪制環形進度條組件

第一步：創建最外部容器

使用容器組件 Stack。

第二步：繪制灰色背景環

1.先使用Circle組件在Shape中繪制一個直徑為290的圓并且設置 shape 的形狀的視口為 viewPort({x: 0, y: 0, width: 330, height: 330 })。

2.使用 stroke 屬性給圓繪制寬度為40的邊框，stroke 給圓繪制邊框的時候，在圓的內部繪制一半，在圓的外部繪制一半，此時圓的邊框的一半視口的外邊。

3.更改 viewPort 屬性值為 viewPort({x: -20, y: -20, width: 330, height: 330 })，將視口向右向下平移20，并且更改fill屬性為none，就會得到一個圓環。

第三步：繪制進度環

1.按照第二步中的步驟繪制進度圓環。

2.根據進度的變化設置邊框間隙屬性 strokeDashArray：

實線長度表示當前進度：(this.progress / 100) * Math.PI * 圓的直徑

間隙長度表示剩余進度：((100 - this.progress) / 100) * Math.PI * 圓的直徑

3.繪制圓環的時候，是以圓心為原點(0,0)以右邊圓弧和x軸的交點為起點順時針繪制的，但是進度條的起始點應該在上邊圓弧和y軸的交點的地方，所以需要將圓環逆時針旋轉90度，可以通過設置屬性rotate({x: 0, y: 0, z: 1, angle: -90 }) 將圓環逆時針旋轉90度變換起始位置。

第四步：繪制進度文字

使用Text組件繪制中間的text文字

組件代碼

@Component
struct CircularProgress {
  @Prop progress: number;
  private viewWH: number;
  private barWidth: number;
  private circleDia: number;
  build() {
    Stack({ alignContent: Alignment.Center }) {
      // 背景環
      Shape() {
        Circle().width(this.circleDia).height(this.circleDia)
      }
      // 形狀的視口
      .viewPort({
        x: - this.barWidth / 2,
        y: - this.barWidth / 2,
        width: this.viewWH,
        height: this.viewWH
      })
      // 填充顏色
      .fill('none')
      // 邊框顏色
      .stroke($r('app.color.color_000000'))
      // 邊框透明度
      .strokeOpacity(0.03)
      // 邊框的寬度
      .strokeWidth(this.barWidth)
      // 路徑端點繪制樣式
      .strokeLineCap(LineCapStyle.Round)

      // 進度圈
      Shape() {
        Circle().width(this.circleDia).height(this.circleDia)
      }
      // 形狀的視口
      .viewPort({
        x: - this.barWidth / 2,
        y: - this.barWidth / 2,
        width: this.viewWH,
        height: this.viewWH
      })
      // 填充顏色
      .fill('none')
      // 邊框顏色
      .stroke($r('app.color.color_254FF7'))
      // 邊框的寬度
      .strokeWidth(this.barWidth)
      // 路徑端點繪制樣式
      .strokeLineCap(LineCapStyle.Round)
      // 邊框的間隙
      .strokeDashArray([
        (this.progress / 100) * Math.PI * this.circleDia,
        ((100 - this.progress) / 100) * Math.PI * this.circleDia,
      ])
      // 逆時針旋轉90度，改變圓環的起始位置
      .rotate({
        x: 0,
        y: 0,
        z: 1,
        angle: -90
      })
      // 文字
      Row({space: 2}) {
        Text(this.progress.toString())
          .fontSize(60)
          .fontWeight(FontWeight.Bold)
          .fontColor($r('app.color.color_000000'))
          .opacity(0.9)
        Text('%')
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .fontColor($r('app.color.color_000000'))
          .opacity(0.6)
          .margin({ top: 46, bottom: 11 })

      }
      .height(68)
    }
    .width(ConfigData.WH_100_100)
  }
}