鸿蒙开发中，如何实现自定义UI组件？比如自定义一个圆形进度条?

Question

开发中需要一个圆形进度条组件，但鸿蒙原生组件中没有提供，所以想自定义一个。但不知道自定义UI组件的具体步骤是什么？需要继承哪个类？如何重写绘制方法？比如绘制圆形背景、进度条进度、进度文字等。另外，自定义组件如何对外提供属性（比如进度值、进度条颜色），方便在XML中配置？求各位大佬指导，最好有简单的自定义圆形进度条示例代码。

Answer 1

鸿蒙开发实现自定义圆形进度条，核心是继承 Component/ComponentProvider（FA 模型）或通过 Canvas 绘制 +@Component 封装（ArkTS/Stage 模型）；ArkTS 更简洁：1. 创建自定义组件，通过 Canvas 组件绘制圆形背景和进度圆弧，用 @State 定义进度值（0-100）；2. 计算圆弧角度（进度值3.6），用 canvasContext.arc 绘制背景圆（strokeStyle 设灰色）和进度圆（strokeStyle 设主题色，lineCap 设 round）；3. 暴露进度属性供外部修改，通过 Canvas 的宽高控制圆形大小；示例：@Component struct CircleProgressBar {@State progress: number=0; build () {Canvas (onReady: (ctx)=>{/ 绘制背景圆 + 进度圆弧 */})}}；FA 模型需重写 onDraw 方法，用 Paint 绘制圆弧，通过 setProgress 方法更新进度并刷新绘制；注意设置 Canvas 宽高相等保证圆形，进度更新时触发 Canvas 重绘，ArkTS 中可结合动画让进度变化更流畅。