门户网站建设及运营,拒绝做网站的理由,ppt免费下载雷锋网站,北京网站制作多少钱Slider 和 Progress 是鸿蒙系统中的常用 UI 组件。Slider 控制数值输入#xff0c;如音量调节#xff1b;Progress 显示任务的完成状态#xff0c;如下载进度。本文通过代码示例展示如何使用这些组件#xff0c;并涵盖 进度条类型介绍、节流优化、状态同步 和 定时器动态更…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 组件展示如何实现数据列表的动态加载与展示。 上一篇「Mac畅玩鸿蒙与硬件14」鸿蒙UI组件篇4 - Toggle 和 Checkbox 组件
下一篇「Mac畅玩鸿蒙与硬件16」鸿蒙UI组件篇6 - List 和 Grid 组件展示数据列表
