大家好，我是潘 Sir，持续分享 IT 技术，帮你少走弯路。《鸿蒙应用开发从入门到项目实战》系列文章持续更新中，陆续更新 AI+编程、企业级项目实战等原创内容、欢迎关注！
ArkUI 提供了丰富的系统组件，用于制作鸿蒙原生应用 APP 的 UI，本文主要讲解滑块 Slider 和进度条 Progress 组件的使用。
一、滑块 Slider
1.1 概述
滑动条组件，通常用于快速调节设置值，如音量调节、亮度调节等应用场景。
1.2 参数
Slider 组件的参数定义如下
Slider(options?: {value?: number, min?: number, max?: number, step?: number, style?: SliderStyle, direction?: Axis, reverse?: boolean})
复制代码
从 API version 9 开始，该接口支持在 ArkTS 卡片中使用。
参数说明：
SliderStyle 枚举说明
1.3 常用属性
支持除触摸热区以外的通用属性设置。
1.4 事件
通用事件仅支持挂载卸载事件：OnAppear，OnDisAppear。
SliderChangeMode 枚举说明
1.5 案例
component 目录下新建 slider 目录，新建 SliderPage.ets 文件
@Entry@Componentstruct SliderPage { @State imgWidth: number = 10
build() { Column({ space: 150 }) { Slider({ min: 100, max: 300, value: this.imgWidth, step: 10, }) .width('90%') .blockColor('#36D') .trackThickness(5) .showTips(true) .onChange((value,mode)=>{ console.log(value.toString()); console.log(mode.toString()); }) } .width('100%') .height('100%') .justifyContent(FlexAlign.Center) }}
复制代码
二、进度条 Progress
2.1 概述
Progress为进度条组件，用于显示各种进度。
2.2 参数
Progress组件的参数定义如下
Progress(options: {value: number, total?: number, type?: ProgressType})
复制代码
value属性用于设置当前进度值。
total属性用于设置总值。
type属性用于设置进度条类型，可通过ProgressType枚举类型进行设置，可选的枚举值如下
示例代码：
component 目录下新建 progress 目录，新建 ProgressParameter.ets 文件
@Entry@Componentstruct ProgressParameter { @State value: number = 30; @State total: number = 100;
build() { Column({ space: 50 }) { Progress({ value: this.value, total: this.total, type: ProgressType.Linear }) Progress({ value: this.value, total: this.total, type: ProgressType.Ring }) Progress({ value: this.value, total: this.total, type: ProgressType.Eclipse }) Progress({ value: this.value, total: this.total, type: ProgressType.ScaleRing }) Progress({ value: this.value, total: this.total, type: ProgressType.Capsule }) .width(50) .height(200)
//分隔线 Divider()
Row({ space: 50 }) { Button('进度-1') .onClick(() => { if (this.value > 0) { this.value--; } }) Button('进度+1') .onClick(() => { if (this.value < this.total) { this.value++; } }) } }.width('100%') .height('100%') .justifyContent(FlexAlign.Center) }}
复制代码
2.3 常用属性
2.3.1 进度条样式
可通过style()调整进度条的样式，例如进度条的宽度，该方法的参数类型定义如下
style({strokeWidth?: string|number|Resource,scaleCount?: number,scaleWidth?: string|number|Resource})
复制代码
strokeWidth属性用于设置进度条的宽度，默认值为4vp。该属性可用于Linear、Ring、ScaleRing三种类型，效果如下
scaleCount属性用于设置ScaleRing的刻度数，默认值为120。效果如下
scaleCount属性用于设置ScaleRing的刻度线的宽度，默认值为2vp。效果如下
示例代码：
在 progress 目录下新建 ProgressAttributePage.ets 文件
@Entry@Component// 进度条progress样式 style（）struct ProgressAttributePage {
build() { Column({ space: 50 }) { // strokeWidth属性用于设置进度条的宽度，默认值为4vp // scaleCount属性用于设置ScaleRing的刻度数，默认值为120 // scaleCount属性用于设置ScaleRing的刻度线的宽度，默认值为2vp Progress({ value: 30, total: 100, type: ProgressType.Linear }) .style({ strokeWidth: 20 })
Progress({ value: 30, total: 100, type: ProgressType.Ring }) .style({ strokeWidth: 20 })
Progress({ value: 30, total: 100, type: ProgressType.ScaleRing }) .style({ strokeWidth: 10, scaleWidth: 3, scaleCount: 30 })
}.width('100%') .height('100%') .justifyContent(FlexAlign.Center) }}
复制代码
2.3.2 进度条颜色
进度条的颜色可通过color()和backgroundColor()方法进行设置，其中color()用于设置前景色，backgroundColor()用于设置背景色，例如
示例代码：
在 progress 目录下新建 ProgressColor.ets 文件
@Entry@Component// 进度条progress颜色struct ProgressColor {
build() { Column({ space: 50 }) { // 进度条的颜色可通过color()和backgroundColor()方法进行设置， // 其中color()用于设置前景色，backgroundColor()用于设置背景色 Progress({ value: 30, total: 100, type: ProgressType.Linear }) .color(Color.Green) .backgroundColor("#26008000")
Progress({ value: 30, total: 100, type: ProgressType.Ring }) .color(Color.Green) .backgroundColor("#26008000")
Progress({ value: 30, total: 100, type: ProgressType.Eclipse }) .color(Color.Green) .backgroundColor("#26008000")
Progress({ value: 30, total: 100, type: ProgressType.ScaleRing }) .color(Color.Green) .backgroundColor("#26008000")
Progress({ value: 30, total: 100, type: ProgressType.Capsule }) .width(200) .color(Color.Green) .backgroundColor("#26008000")
}.width('100%') .height('100%') .justifyContent(FlexAlign.Center) }}
复制代码
《鸿蒙应用开发从入门到项目实战》系列文章持续更新中，陆续更新 AI+编程、企业级项目实战等原创内容，防止迷路，欢迎关注！
评论