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

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

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

20241030_213259.gif


关键词
  • 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%')
    }
  }
}

效果示例

Screenshot_2024-10-30T212825.png


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);
  }
}

效果示例

20241030_212946.gif


二、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%')
  }
}

效果示例

Screenshot_2024-10-30T214303.png

Screenshot_2024-10-30T213129.png

Screenshot_2024-10-30T214336.png


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);
  }
}

效果示例

Screenshot_2024-10-30T213203.png


三、定时器动态更新进度

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

@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和Grid组件展示数据列表


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


目录
相关文章
|
3月前
|
JavaScript 开发工具 开发者
【HarmonyOS 5】鸿蒙Web组件和内嵌网页双向通信DEMO示例
【HarmonyOS 5】鸿蒙Web组件和内嵌网页双向通信DEMO示例
99 3
|
3月前
|
开发者
鸿蒙仓颉开发语言实战教程:自定义组件
本文介绍了如何在仓颉开发语言中创建自定义组件,以封装和管理项目中的 tabbar 组件为例。通过创建独立的组件文件 yltabbar.cj,并使用 @Component 和 @Link 等修饰符实现组件化开发与参数传递,提升代码复用性和项目可维护性。适合希望深入掌握仓颉语言组件开发的 HarmonyOS 开发者学习参考。 #HarmonyOS #仓颉 #购物
|
5天前
|
数据安全/隐私保护 开发者
鸿蒙应用开发从入门到实战(十一):ArkUI组件Text&TextInput
ArkUI提供了丰富的系统组件,用于制作鸿蒙原生应用APP的UI,本文主要讲解文本组件Text和TextInput的使用。
|
缓存 数据安全/隐私保护 JavaScript
【HarmonyOS 5】鸿蒙页面和组件生命周期函数
【HarmonyOS 5】鸿蒙页面和组件生命周期函数
171 0
|
3月前
|
存储 IDE 定位技术
【HarmonyOS 5】鸿蒙组件&模板服务详解 - 助力高效开发的利器
在移动应用开发领域,效率与质量始终是开发者追求的核心目标。鸿蒙系统作为新兴的操作系统,为开发者提供了丰富且强大的开发资源,其中鸿蒙组件&模板服务更是成为开发者快速构建高质量应用的得力助手。
133 0
鸿蒙仓颉语言开发教程:页面和组件的生命周期
仓颉语言中的生命周期指页面或组件从加载到消失的过程。与ArkTs不同,仓颉需在生命周期方法前添加`protected open`修饰符,如`aboutToAppear()`、`onPageShow()`等。部分函数如`onBackPress()`返回布尔值,决定是否拦截系统返回操作。仅`@Entry`组件支持全部生命周期,普通组件仅支持`aboutToAppear`和`aboutToDisappear`。掌握正确写法可避免踩坑。
|
4天前
|
开发者
鸿蒙应用开发从入门到实战(十二):ArkUI组件Button&Toggle
ArkUI提供了丰富的系统组件,用于制作鸿蒙原生应用APP的UI,本文主要讲解按钮组件Button和Toggle的使用。
|
9天前
|
JavaScript
鸿蒙应用开发从入门到实战(八):ArkTS自定义组件语法
ArkUI除系统预置的组件外,还支持自定义组件。使用自定义组件,可使代码的结构更加清晰,并且能提高代码的复用性。
|
6天前
|
存储 编解码 JSON
鸿蒙应用开发从入门到实战(十):ArkUI图片组件Image
ArkUI提供了丰富的系统组件,用于制作鸿蒙原生应用APP的UI,本文主要讲解Image图片组件的使用。
|
10天前
|
API
鸿蒙应用开发从入门到实战(七):ArkTS组件声明语法
《鸿蒙应用开发从入门到项目实战》系列文章持续更新中,陆续更新AI+编程、企业级项目实战等原创内容、欢迎关注!​本文从界面制作从组件声明开始,通过一个相对简单的案例来系统的学习 ArkTS 声明组件的语法。

热门文章

最新文章