CircleProgressView 鸿蒙ArkTS自定义View实现圆形进度条

云兮Coder

已于 2024-09-18 20:44:06 修改

阅读量780

点赞数 4

CC 4.0 BY-SA版权

分类专栏：鸿蒙文章标签： harmonyos 鸿蒙 arkts

于 2024-09-12 22:34:43 首次发布

本文链接：https://blog.youkuaiyun.com/mythace/article/details/142187358

上篇的截图中除了一个上下的箭头，还有一个圆形进度条，今天我们来讲讲这个如何进行实现

我们看这个图形的构造，其实很简单：一个圆形图形，以及一个文本来显示进度所以我们用一个层叠布局
绘制一个带颜色的圆形，然后在放一个文本来显示进度即可。具体的实现看下面这个实现过程

实现步骤

定义组件结构：
- 使用 @Component 装饰器定义 CircleProgressView 结构体。
声明属性：

progress: 数字，当前进度值（0-100），默认为 0
color: 字符串，进度条颜色，默认为 ‘#1989fa’
layerColor: 字符串，背景圆环颜色，默认为 ‘#ebedf0’
circleSize: 数字，圆形进度条的大小（宽度和高度），默认为 100
strokeWidth: 数字，圆环的线条宽度，默认为 4
clockwise: 布尔值，进度是否顺时针增加，默认为 true

其中我们 @State 装饰器来设置 progress 状态。用 @Prop 装饰器定义其他可配置属性。
装饰器的作用是通过数据来驱动UI，当数据变更后UI上的值也将变化，关于鸿蒙中装饰器的使用详见鸿蒙官方文档

初始化绘图上下文：
- 创建 RenderingContextSettings 和 CanvasRenderingContext2D 实例。
实现绘制圆形的辅助方法：
- drawCircle 方法用于绘制圆形或圆弧。
实现 build 方法：
- 使用 Stack 组件作为容器，居中对齐内容。
- 添加 Canvas 组件并设置其宽度和高度。
- 在 onReady 回调中绘制背景圆和进度圆弧。
- 添加 Text 组件显示进度百分比。

具体的代码实现如下:

@Component
export struct CircleProgressView {
   
   
  @State progress: number = 0
  @Prop color: string = '#1989fa'
  @Prop layerColor: string = '#ebedf0'
  @Prop circleSize: number = 100
  @Prop strokeWidth: number = 4
  @