HarmonyOS 鸿蒙Next中如何使用一个进度条同时显示两个进度

HarmonyOS 鸿蒙Next中如何使用一个进度条同时显示两个进度 【问题描述】：视频进度条包含当前播放进度和视频缓冲进度，目前Slider组件只能设置一级进度，

【问题现象】：如何设置二级进度值用来显示播放缓冲进度？

【版本信息】：不涉及

【复现代码】：不涉及

3 回复

使用Stack布局将两个Slider组件叠加在一起，实现一个进度条同时显示两个进度的效果。文档参考链接为：https://developer.huawei.com/consumer/cn/doc/architecture-guides/tools-v1_2-ts_214-0000002382129586

更多关于HarmonyOS 鸿蒙Next中如何使用一个进度条同时显示两个进度的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，使用Progress组件通过ProgressStyle设置双进度条。通过total和value属性分别控制总进度和当前进度，结合ProgressOptions配置双进度样式。示例代码：

Progress({
  value: 40,
  total: 100,
  style: ProgressStyle.Dual
})

其中第一个进度条显示主进度（40%），第二个进度条通过附加配置显示次要进度。需在ProgressOptions中分别设置两个进度的颜色和数值。

在HarmonyOS Next中，可以通过自定义Slider组件实现双进度条效果。以下是实现步骤：

  1. 使用Slider的track和progress属性
    将主进度（播放进度）通过progress属性设置，缓冲进度可以通过自定义样式叠加实现。

  2. 自定义样式覆盖
    通过Stack容器嵌套两个Slider：

    • 底层Slider设置缓冲进度（颜色较浅，如灰色）
    • 上层Slider设置播放进度（颜色较深，如蓝色）
      通过调整上层Slider的zIndex确保播放进度覆盖缓冲进度。

  3. 代码示例

    [@Entry](/user/Entry)
[@Component](/user/Component)
struct DoubleProgressBar {
  @State currentProgress: number = 30; // 播放进度
  @State bufferProgress: number = 70;  // 缓冲进度

  build() {
    Stack({ alignContent: Alignment.Start }) {
      // 缓冲进度条（底层）
      Slider({
        value: this.bufferProgress,
        min: 0,
        max: 100,
        style: SliderStyle.OutSet
      })
      .trackColor(Color.Gray)
      .selectedColor(Color.Gray)
      .width('100%')

      // 播放进度条（上层）
      Slider({
        value: this.currentProgress,
        min: 0,
        max: 100,
        style: SliderStyle.OutSet
      })
      .trackColor(Color.Blue)
      .selectedColor(Color.Blue)
      .width('100%')
    }
    .width('100%')
  }
}

  4. 动态更新
    通过@State变量分别控制两个进度值，使用定时器或媒体播放回调更新：

    • currentProgress 随播放时间增长
    • bufferProgress 根据网络加载情况更新

这种方式通过视觉叠加实现了双进度效果，且两个进度可独立控制。注意调整进度条高度和颜色区分层级。

回到顶部