HarmonyOS 鸿蒙Next中分享一个自定义进度条，更灵活的实现需求

HarmonyOS 鸿蒙Next中分享一个自定义进度条，更灵活的实现需求

  1. 封装一个类似于Shilder组件的进度条组件，更灵活的实现具体需求，以下是具体demo：

使用Stack层叠 ，背景进度条，已划进度条，滑块三部分

@Component
export struct CustomSlider {
  @Prop total: number = 0 // 进度条的总长度
  @Prop @Watch('valueChange') value: number = 0 // 当前进度
  @Prop progressWidth: number = 200 // 进度条的宽度
  @State positionX: number = 0 // 当前进度条位置
  @State offsetX: number = 0; // 滑动时，记录当前滑动的X坐标
  @State isDrag: boolean = false; // 是否正在拖动
  valueChanged: (value: number) => void = () => {
  }

  valueChange() {
    this.positionX = this.progressWidth * this.value / this.total
    if (this.positionX >= this.progressWidth) {
      this.positionX = this.progressWidth
    }
    if (this.positionX <= 0) {
      this.positionX = 0
    }
  }

  aboutToAppear(): void {
    setTimeout(() => {
      this.progressWidth = px2vp(componentUtils.getRectangleById('progress').size.width)
      this.positionX = this.progressWidth * this.value / this.total
    }, 20)
  }

  build() {
    Stack({ alignContent: Alignment.Start }) {
      Row() {
      }
      .width('100%')
      .height(4)
      .borderRadius(2)
      .backgroundColor('#999999')

      Row() {
        Row()
          .width(this.isDrag ? this.offsetX : this.positionX)
          .height(4)
          .borderRadius(2)
          .backgroundColor(Color.Red)
          
        Row() {
        }
        .width(14)
        .height(14)
        .borderRadius(7)
        .backgroundColor('#ccc')
        .margin({ left: -7 })
        .gesture(
          // 绑定拖动手势
          PanGesture()
            .onActionStart((event: GestureEvent | undefined) => {
              this.isDrag = true
            })
            .onActionUpdate((event: GestureEvent | undefined) => {
              if (event) {
                this.offsetX = this.positionX + event.offsetX;
                if (this.offsetX >= this.progressWidth) {
                  this.offsetX = this.progressWidth
                }
                if (this.offsetX <= 0) {
                  this.offsetX = 0
                }
                let rate = this.offsetX / this.progressWidth
                let currentValue = Math.round(this.total * rate)
                this.valueChanged(currentValue)
              }
            })
            .onActionEnd(() => {
              this.isDrag = false
              this.positionX = this.offsetX;
              if (this.positionX >= this.progressWidth) {
                this.positionX = this.progressWidth
              }
              if (this.positionX <= 0) {
                this.positionX = 0
              }
              this.value = Math.round(this.total * this.positionX / this.progressWidth)
              this.valueChanged(this.value)
            })
        )
      }
    }
    .id('progress')
    .height(15)
    .width(this.progressWidth)
    .onClick((event: ClickEvent) => {
      if (event) {
        this.offsetX = event.x;
        if (this.offsetX >= this.progressWidth) {
          this.offsetX = this.progressWidth
        }
        if (this.offsetX <= 0) {
          this.offsetX = 0
        }
        this.positionX = this.offsetX;
        this.value = Math.round(this.total * this.positionX / this.progressWidth)
        this.valueChanged(this.value)
      }
    })
  }
}
  1. 使用方法

在回调中实现播放跳转等功能

  1. 关键实现

进度条的拖拽事件 ，滑动条的点击事件

具体参数可以查看官网： 手势 ，https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-gesture-events-single-gesture#%E6%8B%96%E5%8A%A8%E6%89%8B%E5%8A%BFpangesture

点击 https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-events-click#clickevent%E5%AF%B9%E8%B1%A1%E8%AF%B4%E6%98%8E


更多关于HarmonyOS 鸿蒙Next中分享一个自定义进度条，更灵活的实现需求的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS Next中，可以通过自定义组件实现灵活进度条。使用ArkUI的@Component装饰器定义ProgressBar组件，利用@State管理进度状态。主要步骤：

  1. 定义组件结构：
[@Component](/user/Component)
struct CustomProgressBar {
  [@State](/user/State) progress: number = 0
  // 组件实现
}
  1. 使用Canvas绘制进度条：
Canvas()
  .width('100%')
  .height(20)
  .onReady(() => {
    // 绘制逻辑
  })
  1. 通过属性方法控制进度：
setProgress(value: number) {
  this.progress = value
}

可通过@Prop实现父子组件通信，@Watch监听进度变化。支持自定义颜色、圆角、动画效果等样式属性。

更多关于HarmonyOS 鸿蒙Next中分享一个自定义进度条，更灵活的实现需求的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个很好的HarmonyOS Next自定义进度条实现方案。我来分析下关键点：

  1. 组件设计思路：
  • 使用Stack布局叠加背景条、进度条和滑块
  • 通过PanGesture实现滑块拖拽
  • 通过onClick实现点击跳转
  1. 核心功能实现：
  • 拖拽手势处理：在onActionUpdate中计算偏移量并限制边界
  • 点击事件处理：根据点击位置直接设置进度
  • 进度计算：通过positionX/progressWidth比例换算实际值
  1. 优化建议：
  • 可以增加动画效果使交互更流畅
  • 可考虑添加步进控制功能
  • 可以扩展支持垂直方向进度条

这个实现方案比较完整，覆盖了进度条的基本交互需求，代码结构清晰，可以作为自定义UI组件开发的参考范例。

回到顶部