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);
}
}
小结
本篇介绍了鸿蒙系统中的 Slider
和 Progress
组件的使用,包括:
- 滑块控制与禁用模拟:通过逻辑实现启用与禁用状态;
- 节流优化:使用节流函数避免频繁触发更新;
- 多种进度条样式:了解环形、线性、胶囊等进度条;
- 定时器动态更新:通过定时器平滑更新进度条。
下一篇预告
下一篇将介绍 List 和 Grid 组件,展示如何实现数据列表的动态加载与展示。