【HarmonyOS 5.0.0 或以上】构建进度条组件 Progress:支持线形 / 环形 / 动画过渡

🎯 目标

实现一个通用进度条组件 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 /
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值