当前位置：首页 > article >正文

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

article 2024/11/6 8:34:04

Slider 和 Progress 是鸿蒙系统中的常用 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(