OpenHarmony ETS UI 組件封裝之環(huán)形進度條
??51CTO OpenHarmony技術(shù)社區(qū)??
概述
本文介紹的是如何使用 TS 的容器組件 Stack 和繪制組件 Shape、Circle 封裝一個環(huán)形進度條。進度條主要由灰色背景環(huán)、藍色進度環(huán)、 進度文字三部分組成。
基礎(chǔ)組件介紹
1.Stack
堆疊容器，子組件按照順序依次入棧，后一個子組件覆蓋前一個子組件。
Stack(value:{alignContent?: Alignment})
alignContent：設(shè)置子組件在容器內(nèi)的對齊方式
Alignment枚舉說明
參考文檔路徑：
https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-container-stack.md。
2.Shape
繪制組件的父組件，父組件中會描述所有繪制組件均支持的通用屬性。繪制組件使用Shape作為父組件，實現(xiàn)類似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。
繪制環(huán)形進度條組件
第一步：創(chuàng)建最外部容器
使用容器組件 Stack。
第二步：繪制灰色背景環(huán)
1.先使用Circle組件在Shape中繪制一個直徑為290的圓 并且設(shè)置 shape 的形狀的視口為 viewPort({x: 0, y: 0, width: 330, height: 330 })。
2.使用 stroke 屬性給圓繪制寬度為40的邊框，stroke 給圓繪制邊框的時候，在圓的內(nèi)部繪制一半，在圓的外部繪制一半，此時圓的邊框的一半視口的外邊。
3.更改 viewPort 屬性值為 viewPort({x: -20, y: -20, width: 330, height: 330 })， 將視口向右向下平移20，并且更改fill屬性為none，就會得到一個圓環(huán)。
第三步：繪制進度環(huán)
1.按照第二步中的步驟繪制進度圓環(huán)。
2.根據(jù)進度的變化設(shè)置邊框間隙屬性 strokeDashArray：
實線長度表示當前進度：(this.progress / 100) * Math.PI * 圓的直徑
間隙長度表示剩余進度：((100 - this.progress) / 100) * Math.PI * 圓的直徑
3.繪制圓環(huán)的時候，是以圓心為原點(0,0)以右邊圓弧和x軸的交點為起點順時針繪制的，但是進度條的起始點應(yīng)該在上邊圓弧和y軸的交點的地方，所以需要將圓環(huán)逆時針旋轉(zhuǎn)90度，可以通過設(shè)置屬性rotate({x: 0, y: 0, z: 1, angle: -90 }) 將圓環(huán)逆時針旋轉(zhuǎn)90度變換起始位置。
第四步：繪制進度文字
使用Text組件繪制中間的text文字
組件代碼
@Component
struct CircularProgress {
@Prop progress: number;
private viewWH: number;
private barWidth: number;
private circleDia: number;
build() {
Stack({ alignContent: Alignment.Center }) {
// 背景環(huán)
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,
])
// 逆時針旋轉(zhuǎn)90度，改變圓環(huán)的起始位置
.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)
}
}
總結(jié)
除了使用容器組件 Stack 和繪制組件 Shape、Circle 封裝一個環(huán)形進度條。還可以使用繪制組件 Path 或者是畫布組件 Canvas 繪制環(huán)形的進度條。相比較之下，使用容器組件 Stack 和繪制組件 Shape、Circle 繪制是較為簡單的一種方法。
??51CTO OpenHarmony技術(shù)社區(qū)??
