Bootstrap

「Mac畅玩鸿蒙与硬件15」鸿蒙UI组件篇5 - Slider 和 Progress 组件

SliderProgress 是鸿蒙系统中的常用 UI 组件。Slider 控制数值输入,如音量调节;Progress 显示任务的完成状态,如下载进度。本文通过代码示例展示如何使用这些组件,并涵盖 进度条类型介绍节流优化状态同步定时器动态更新

在这里插入图片描述


关键词
  • Slider 组件
  • Progress 组件
  • 节流优化
  • 定时器更新
  • 进度条样式
  • 状态同步

一、Slider 组件基础
1.1 基本用法

以下示例展示 Slider 组件的基础用法,用户可拖动滑块实时控制数值,并显示当前值:

@Entry
@Component
struct SliderExample {
   
  @State value: number = 50; // 初始化滑块值

  build() {
   
    Column() {
   
      // 显示当前滑块的值
      Text(`当前值: ${
     this.value}`)
        .fontSize(18)

      // 创建滑块组件
      Slider({
   
        value: this.value, // 当前滑块值
        min: 0,
        max: 100,
      })
        .blockColor(Color.Blue) // 设置滑块颜色
        .trackColor(Color.Gray) // 设置轨道颜色
        .onChange((newValue) => this.value = newValue); // 实时更新值

      // 增添趣味的小猫图片
      Image($r('app.media.cat'))
        .width('46%')
        .height('95%')
    }
  }
}

效果示例

在这里插入图片描述


1.2 模拟禁用的 Slider

滑块组件没有直接的 disabled 属性。通过逻辑控制模拟启用和禁用状态,并使用节流函数减少频繁更新:

@Entry
@Component
struct LockedSlider {
   
  @State value: number = 50;
  @State isDisabled: boolean = true; // 控制滑块状态

  private lastTime: number = 0; // 记录上次更新时间

  // 节流函数,避免频繁触发更新
  throttleChange
;