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

SoraLuna
发布于 2024-11-22 22:09
浏览
1收藏

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

「Mac畅玩鸿蒙与硬件15」鸿蒙UI组件篇5 - 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%')
    }
  }
}

效果示例

「Mac畅玩鸿蒙与硬件15」鸿蒙UI组件篇5 - Slider 和 Progress 组件-鸿蒙开发者社区


1.2 模拟禁用的 Slider

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

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

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

  // 节流函数,避免频繁触发更新
  throttleChange(newValue: number) {
    const now = Date.now();
    if (now - this.lastTime > 100) {
      this.value = newValue;
      this.lastTime = now;
    }
  }

  build() {
    Column() {
      Image($r('app.media.cat')) // 显示图片
        .width(305)
        .height(360)
        .margin({ bottom: 30 });

      Column() {
        Text(`滑块状态: ${this.isDisabled ? '禁用' : '启用'}`)
          .fontSize(18)
          .margin({ bottom: 10 });

        Text(`当前值: ${this.value}`)
          .fontSize(18)
          .margin({ bottom: 10 });

        Slider({
          value: this.isDisabled ? 50 : this.value,
          min: 0,
          max: 100,
        })
          .blockColor(this.isDisabled ? Color.Gray : Color.Blue)
          .trackColor(Color.Gray)
          .onChange((newValue) => {
            if (!this.isDisabled) this.throttleChange(newValue);
          });

        Button(this.isDisabled ? '启用滑块' : '禁用滑块')
          .margin({ bottom: 20 })
          .onClick(() => (this.isDisabled = !this.isDisabled));
      }
    }
    .width('100%')
    .height('100%')
    .padding(10);
  }
}

效果示例

「Mac畅玩鸿蒙与硬件15」鸿蒙UI组件篇5 - Slider 和 Progress 组件-鸿蒙开发者社区


二、Progress 组件基础

2.1 Progress 组件的类型

Progress 组件支持多种样式,适用于不同的应用场景:

  • ProgressType.Linear:线性进度条
  • ProgressType.Ring:环形进度条
  • ProgressType.Eclipse:椭圆进度条

2.2 环形进度条示例
@Entry
@Component
struct RingProgress {
  @State progress: number = 75;

  build() {
    Column() {
      Progress({
        value: this.progress,
        total: 100,
        type: ProgressType.Ring,
      })
        .color(Color.Red) // 设置进度颜色
        .backgroundColor(Color.Green); // 设置背景颜色
    }
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
    .backgroundImage($r('app.media.cat'))
    .margin(20)
    .width('100%')
    .height('100%')
  }
}

效果示例

「Mac畅玩鸿蒙与硬件15」鸿蒙UI组件篇5 - Slider 和 Progress 组件-鸿蒙开发者社区

「Mac畅玩鸿蒙与硬件15」鸿蒙UI组件篇5 - Slider 和 Progress 组件-鸿蒙开发者社区

「Mac畅玩鸿蒙与硬件15」鸿蒙UI组件篇5 - Slider 和 Progress 组件-鸿蒙开发者社区


2.3 使用滑块控制线性进度条
@Entry
@Component
struct VolumeControl {
  @State volume: number = 50;

  build() {
    Column() {
      Text('音量控制')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .margin({ bottom: 20 });

      Progress({
        value: this.volume,
        total: 100,
        type: ProgressType.Linear,
      })
        .color(Color.Blue)
        .height(8);

      Slider({
        value: this.volume,
        min: 0,
        max: 100,
      })
        .blockColor(Color.Blue)
        .trackColor(Color.Gray)
        .margin({ top: 20 })
        .onChange((newValue) => this.volume = newValue);
    }
    .padding(20);
  }
}

效果示例

「Mac畅玩鸿蒙与硬件15」鸿蒙UI组件篇5 - Slider 和 Progress 组件-鸿蒙开发者社区


三、定时器动态更新进度

通过定时器实现平滑更新进度:

@Entry
@Component
struct SmoothProgress {
  @State progress: number = 0;

  build() {
    Column() {
      Image($r('app.media.cat'))
        .width('46%')
        .height('96%');

      Progress({
        value: this.progress,
        total: 100,
        type: ProgressType.Capsule,
      })
        .color(Color.Green)
        .onAppear(() => this.startTimer());
    }
  }

  startTimer(): void {
    setInterval(() => {
      if (this.progress < 100) this.progress += 1;
    }, 100);
  }
}

小结

本篇介绍了鸿蒙系统中的 SliderProgress 组件的使用,包括:

  1. 滑块控制与禁用模拟:通过逻辑实现启用与禁用状态;
  2. 节流优化:使用节流函数避免频繁触发更新;
  3. 多种进度条样式:了解环形、线性、胶囊等进度条;
  4. 定时器动态更新:通过定时器平滑更新进度条。

下一篇预告

下一篇将介绍 List 组件,展示如何实现数据列表的动态加载与展示。


上一篇:「Mac畅玩鸿蒙与硬件14」鸿蒙UI组件篇4 - Toggle 和 Checkbox 组件

下一篇:「Mac畅玩鸿蒙与硬件16」鸿蒙UI组件篇6 - List 组件展示数据列表


作者:SoraLuna
链接:https://www.nutpi.net/thread?topicId=229
來源:坚果派
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2024-11-25 21:15:12修改
1
收藏 1
回复
举报
回复
    相关推荐