OpenHarmony ETS UI 组件封装之环形进度条 _进度条

满堂花醉三千客，一剑霜寒十四州。这篇文章主要讲述OpenHarmony ETS UI 组件封装之环形进度条相关的知识，希望能为你提供帮助。
作者：满康敏
概述本文介绍的是如何使用 TS 的容器组件 Stack 和绘制组件 Shape、Circle 封装一个环形进度条。进度条主要由灰色背景环、蓝色进度环、进度文字三部分组成。

文章图片

基础组件介绍 1.Stack
堆叠容器，子组件按照顺序依次入栈，后一个子组件覆盖前一个子组件。
Stack(value:alignContent?: Alignment)
alignContent：设置子组件在容器内的对齐方式
Alignment枚举说明

名称	描述
TopStart	顶部起始端。
Top	顶部横向居中。
TopEnd	顶部尾端。
Start	起始端纵向居中。
Center	横向和纵向居中。
End	尾端纵向居中。
BottomStart	底部起始端。
Bottom	底部横向居中。
BottomEnd	底部尾端。

参考文档路径：https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-container-stack.md
2.Shape
绘制组件的父组件，父组件中会描述所有绘制组件均支持的通用属性。绘制组件使用Shape作为父组件，实现类似SVG的效果。
属性：

参数名称	参数类型	默认值	必填	参数描述
viewPort	x: Length, y: Length, width: Length, height: Length	-	是	形状的视口。
fill	Color	Black	否	填充颜色。
stroke	Color	-	否	边框颜色。
strokeDashArray	Array< Length>	[]	否	设置边框的间隙。
strokeDashOffset	Length	0	否	边框绘制起点的偏移量。
strokeLineCap	LineCapStyle	LineCapStyle.Butt	否	路径端点绘制样式。
strokeLineJoin	LineJoinStyle	LineJoinStyle.Miter	否	边框拐角绘制样式。
strokeMiterLimit	number	4	否	锐角绘制成斜角的极限值。
strokeOpacity	number	1	否	设置边框的不透明度。
strokeWidth	Length	1	否	设置边框的宽度。
antiAlias	boolean	true	否	是否开启抗锯齿。

【OpenHarmony ETS UI 组件封装之环形进度条】LineCapStyle枚举说明

名称	描述
Butt	分割线两端为平行线。
Round	分割线两端为半圆。
Square	分割线两端为平行线

LineJoinStyle枚举说明

名称	描述
Bevel	使用斜角连接路径段。
Miter	使用尖角连接路径段。
Round	使用圆角连接路径段。

参考文档路径：https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-shape.md
3.Circle
圆形绘制组件。
属性：

参数名称	参数类型	默认值	必填	参数描述
width	Length	0	否	圆所在矩形的宽度。
height	Length	0	否	圆所在矩形的高度。

参考文档路径：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)

总结除了使用容器组件 Stack 和绘制组件 Shape、Circle 封装一个环形进度条。还可以使用绘制组件 Path 或者是画布组件 Canvas 绘制环形的进度条。相比较之下，使用容器组件 Stack 和绘制组件 Shape、Circle 绘制是较为简单的一种方法。
更多原创内容请关注：深开鸿技术团队入门到精通、技巧到案例，系统化分享HarmonyOS开发技术，欢迎投稿和订阅，让我们一起携手前行共建鸿蒙生态。
想了解更多关于鸿蒙的内容，请访问：
51CTO OpenHarmony技术社区
https://ost.51cto.com/#bkwz
::: hljs-center