鸿蒙应用开发从入门到实战（十三）：ArkUI组件Slider&Progress

大家好，我是潘Sir，持续分享IT技术，帮你少走弯路。《鸿蒙应用开发从入门到项目实战》系列文章持续更新中，陆续更新AI+编程、企业级项目实战等原创内容、欢迎关注！
ArkUI提供了丰富的系统组件，用于制作鸿蒙原生应用APP的UI，本文主要讲解滑块Slider和进度条Progress组件的使用。
一、滑块Slider

1.1 概述

滑动条组件，通常用于快速调节设置值，如音量调节、亮度调节等应用场景。
1.2 参数

Slider组件的参数定义如下

1. Slider(options?: {value?: number, min?: number, max?: number, step?: number, style?: SliderStyle, direction?: Axis, reverse?: boolean})

复制代码

从API version 9开始，该接口支持在ArkTS卡片中使用。
参数说明：
参数名参数类型必填参数描述valuenumber否当前进度值。默认值：0minnumber否设置最小值。默认值：0maxnumber否设置最大值。默认值：100说明：min >= max异常情况，min取默认值0，max取默认值100。value不在[min, max]范围之内，取min/max，靠近min取min，靠近max取max。stepnumber否设置Slider滑动步长。默认值：1取值范围：[0.01, max]说明：设置小于0或百分比的值时，按默认值显示。styleSliderStyle否设置Slider的滑块与滑轨显示样式。默认值：SliderStyle.OutSetdirectionAxis否设置滑动条滑动方向为水平或竖直方向。默认值：Axis.Horizontalreverseboolean否设置滑动条取值范围是否反向，横向Slider默认为从左往右滑动，竖向Slider默认为从上往下滑动。默认值：falseSliderStyle枚举说明
名称描述OutSet滑块在滑轨上。InSet滑块在滑轨内。1.3 常用属性

支持除触摸热区以外的通用属性设置。
名称参数类型描述blockColorResourceColor设置滑块的颜色。从API version 9开始，该接口支持在ArkTS卡片中使用。trackColorResourceColor设置滑轨的背景颜色。从API version 9开始，该接口支持在ArkTS卡片中使用。selectedColorResourceColor设置滑轨的已滑动部分颜色。从API version 9开始，该接口支持在ArkTS卡片中使用。showStepsboolean设置当前是否显示步长刻度值。默认值：false从API version 9开始，该接口支持在ArkTS卡片中使用。showTipsboolean设置滑动时是否显示百分比气泡提示。默认值：false从API version 9开始，该接口支持在ArkTS卡片中使用。说明：当direction的属性值为Axis.Horizontal时，tip显示在滑块正上方。值为Axis.Vertical时，tip显示在滑块正左边。tip的绘制区域为Slider自身节点的overlay。Slider不设置边距，或者边距比较小时，tip会被截断。trackThicknessLength设置滑轨的粗细。默认值：当参数style的值设置SliderStyle.OutSet 时为 4.0vp，SliderStyle.InSet时为20.0vp。从APIversion9开始，该接口支持在ArkTS卡片中使用。说明：设置为小于0的值时，按默认值显示。1.4 事件

通用事件仅支持挂载卸载事件：OnAppear，OnDisAppear。
名称功能描述onChange(callback: (value: number, mode: SliderChangeMode) => void)Slider滑动时触发事件回调。value：当前滑动进度值。若返回值有小数，可使用number.toFixed()方法将数据处理为预期的精度。mode：拖动状态。从API version 9开始，该接口支持在ArkTS卡片中使用。说明：Begin和End状态当手势点击时都会触发，Moving和Click状态当value值发生变换时触发。当连贯动作为拖动动作时，不触发Click状态。value值的变化范围为对应步长steps数组。SliderChangeMode枚举说明
名称值描述Begin0手势/鼠标接触或者按下滑块。Moving1正在拖动滑块过程中。End2手势/鼠标离开滑块。Click3点击滑动条使滑块位置移动。1.5 案例

component目录下新建slider目录，新建SliderPage.ets文件

1. @Entry
2. @Component
3. struct SliderPage {
4.   @State imgWidth: number = 10
6.   build() {
7.     Column({ space: 150 }) {
8.       Slider({
9.         min: 100,
10.         max: 300,
11.         value: this.imgWidth,
12.         step: 10,
13.       })
14.         .width('90%')
15.         .blockColor('#36D')
16.         .trackThickness(5)
17.         .showTips(true)
18.         .onChange((value,mode)=>{
19.           console.log(value.toString());
20.           console.log(mode.toString());
21.         })
22.     }
23.     .width('100%')
24.     .height('100%')
25.     .justifyContent(FlexAlign.Center)
26.   }
27. }

复制代码

二、进度条Progress

2.1 概述

Progress为进度条组件，用于显示各种进度。
2.2 参数

Progress组件的参数定义如下

1. Progress(options: {value: number, total?: number, type?: ProgressType})

复制代码

• value
  

value属性用于设置当前进度值。

• total
  

total属性用于设置总值。

• type
  

type属性用于设置进度条类型，可通过ProgressType枚举类型进行设置，可选的枚举值如下
名称描述效果ProgressType.Linear线性样式

ProgressType.Ring环形无刻度样式

ProgressType.Eclipse月食样式

ProgressType.ScaleRing环形有刻度样式

ProgressType.Capsule胶囊样式

示例代码：
component目录下新建progress目录，新建ProgressParameter.ets文件

1. @Entry
2. @Component
3. struct ProgressParameter {
4.   @State value: number = 30;
5.   @State total: number = 100;
7.   build() {
8.     Column({ space: 50 }) {
9.       Progress({ value: this.value, total: this.total, type: ProgressType.Linear })
10.       Progress({ value: this.value, total: this.total, type: ProgressType.Ring })
11.       Progress({ value: this.value, total: this.total, type: ProgressType.Eclipse })
12.       Progress({ value: this.value, total: this.total, type: ProgressType.ScaleRing })
13.       Progress({ value: this.value, total: this.total, type: ProgressType.Capsule })
14.         .width(50)
15.         .height(200)
17.       //分隔线
18.       Divider()
20.       Row({ space: 50 }) {
21.         Button('进度-1')
22.           .onClick(() => {
23.             if (this.value > 0) {
24.               this.value--;
25.             }
26.           })
27.         Button('进度+1')
28.           .onClick(() => {
29.             if (this.value < this.total) {
30.               this.value++;
31.             }
32.           })
33.       }
34.     }.width('100%')
35.     .height('100%')
36.     .justifyContent(FlexAlign.Center)
37.   }
38. }

复制代码

2.3 常用属性

2.3.1 进度条样式

可通过style()调整进度条的样式，例如进度条的宽度，该方法的参数类型定义如下

1. style({strokeWidth?: string|number|Resource,scaleCount?: number,scaleWidth?: string|number|Resource})

复制代码

• strokeWidth
  

strokeWidth属性用于设置进度条的宽度，默认值为4vp。该属性可用于Linear、Ring、ScaleRing三种类型，效果如下

• scaleCount
  

scaleCount属性用于设置ScaleRing的刻度数，默认值为120。效果如下

• scaleWidth
  

scaleCount属性用于设置ScaleRing的刻度线的宽度，默认值为2vp。效果如下

示例代码：
在progress目录下新建ProgressAttributePage.ets文件

1. @Entry
2. @Component
3. // 进度条progress样式 style（）
4. struct ProgressAttributePage {
6.   build() {
7.     Column({ space: 50 }) {
8.       // strokeWidth属性用于设置进度条的宽度，默认值为4vp
9.       // scaleCount属性用于设置ScaleRing的刻度数，默认值为120
10.       // scaleCount属性用于设置ScaleRing的刻度线的宽度，默认值为2vp
11.       Progress({ value: 30, total: 100, type: ProgressType.Linear })
12.         .style({
13.           strokeWidth: 20
14.         })
16.       Progress({ value: 30, total: 100, type: ProgressType.Ring })
17.         .style({
18.           strokeWidth: 20
19.         })
21.       Progress({ value: 30, total: 100, type: ProgressType.ScaleRing })
22.         .style({
23.           strokeWidth: 10,
24.           scaleWidth: 3,
25.           scaleCount: 30
26.         })
28.     }.width('100%')
29.     .height('100%')
30.     .justifyContent(FlexAlign.Center)
31.   }
32. }

复制代码

2.3.2 进度条颜色

进度条的颜色可通过color()和backgroundColor()方法进行设置，其中color()用于设置前景色，backgroundColor()用于设置背景色，例如

示例代码：
在progress目录下新建ProgressColor.ets文件

1. @Entry
2. @Component
3. // 进度条progress颜色
4. struct ProgressColor {
6.   build() {
7.     Column({ space: 50 }) {
8.       // 进度条的颜色可通过color()和backgroundColor()方法进行设置，
9.       // 其中color()用于设置前景色，backgroundColor()用于设置背景色
10.       Progress({ value: 30, total: 100, type: ProgressType.Linear })
11.         .color(Color.Green)
12.         .backgroundColor("#26008000")
14.       Progress({ value: 30, total: 100, type: ProgressType.Ring })
15.         .color(Color.Green)
16.         .backgroundColor("#26008000")
18.       Progress({ value: 30, total: 100, type: ProgressType.Eclipse })
19.         .color(Color.Green)
20.         .backgroundColor("#26008000")
22.       Progress({ value: 30, total: 100, type: ProgressType.ScaleRing })
23.         .color(Color.Green)
24.         .backgroundColor("#26008000")
26.       Progress({ value: 30, total: 100, type: ProgressType.Capsule })
27.         .width(200)
28.         .color(Color.Green)
29.         .backgroundColor("#26008000")
31.     }.width('100%')
32.     .height('100%')
33.     .justifyContent(FlexAlign.Center)
34.   }
35. }

复制代码

《鸿蒙应用开发从入门到项目实战》系列文章持续更新中，陆续更新AI+编程、企业级项目实战等原创内容，防止迷路，欢迎关注！

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

感谢分享，学习下。

东西不错很实用谢谢分享

过来提前占个楼

喜欢鼓捣这些软件，现在用得少，谢谢分享！

感谢分享，学习下。

这个好，看起来很实用