更多内容请访问：51CTOOpenHarmony技术社区https://ost.51cto.com概述本文介绍如何使用TS的容器组件Stack和绘制组件Shape、Circle来封装一个圆形进度条。进度条主要由三部分组成：灰色背景环、蓝色进度环、进度文字。基本组件介绍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-形状.md.3.Circle画圆组件。属性：参考文档路径：https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-circle.md。绘制圆形进度条组件第一步：创建最外层容器，使用容器组件Stack。第二步：绘制一个灰色的背景环1.首先在Shape中使用Circle组件绘制一个直径为290的圆，并将shape的视口设置为viewPort({x:0,y:0,width:330,高度：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组件绘制中间文本文本组件代码@ComponentstructCircularProgress{@Propprogress:number;私有视图WH：数字；私有barWidth：数字；私密圈Dia：人数；build(){Stack({alignContent:Alignment.Center}){//背景环Shape(){Circle().width(this.circleDia).height(this.circleDia)}//shape的viewport.viewPort({x:-this.barWidth/2,y:-this.barWidth/2,width:this.viewWH,height:this.viewWH})//Fillcolor.fill('none')//边框color.stroke($r('app.color.color_000000'))//边框透明度.strokeOpacity(0.03)//边框宽度.strokeWidth(this.barWidth)//路径端点绘制style.strokeLineCap(LineCapStyle.Round)//进度圆Shape(){圆圈（）。width(this.circleDia).height(this.circleDia)}//形状的viewport.viewPort({x:-this.barWidth/2,y:-this.barWidth/2,width:this.viewWH,height:this.查看WH})//填充color.fill('none')//Bordercolor.stroke($r('app.color.color_254FF7'))//Borderwidth.strokeWidth(this.barWidth)//路径端点绘制样式.strokeLineCap(LineCapStyle.Round)//边框gap.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})//TextRow({space:2}){文本(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来绘制是一种比较简单的方法。更多信息请访问：51CTOOpenHarmony技术社区https://ost.51cto.com
