🎯 目标
实现一个通用进度条组件 CommonProgress
,适用于任务进度、加载状态、表单完成度等场景,支持:
-
线形进度条(支持百分比、颜色渐变)
-
环形进度条(用于嵌入卡片、按钮等)
-
自定义尺寸、颜色、进度文本显示
-
支持动画过渡更新
-
兼容多样布局场景(横向 / 嵌套 / 居中)
🧱 展示样式示意
[▰▰▰▰▱▱▱▱▱] 40%
⭕ 72% (环形进度,嵌入图标中心)
🧰 组件实现:CommonProgress.ets
@Component
export struct CommonProgress {
@Prop percent: number = 0 // 当前进度 (0~100)
@Prop type: 'line' | 'circle' = 'line'
@Prop showText: boolean = true
@Prop strokeWidth: number = 6
@Prop color: string = '#007DFF'
@Prop trailColor: string = '#f0f0f0'
@Prop radius: number = 40 // 环形半径,仅用于 circle
build() {
if (this.type === 'line') {
Column({ space: 4 }) {
Row()
.height(this.strokeWidth)
.width('100%')
.backgroundColor(this.trailColor)
.borderRadius(this.strokeWidth /