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

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

news 2024/11/4 21:32:52

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

效果示例

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

效果示例

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

效果示例

三、定时器动态更新进度

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

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