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

大家好，我是潘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卡片中使用。

参数说明：

参数名	参数类型	必填	参数描述
value	number	否	当前进度值。默认值：0
min	number	否	设置最小值。默认值：0
max	number	否	设置最大值。默认值：100说明：min >= max异常情况，min取默认值0，max取默认值100。value不在[min, max]范围之内，取min/max，靠近min取min，靠近max取max。
step	number	否	设置Slider滑动步长。默认值：1取值范围：[0.01, max]说明：设置小于0或百分比的值时，按默认值显示。
style	SliderStyle	否	设置Slider的滑块与滑轨显示样式。默认值：SliderStyle.OutSet
direction	Axis	否	设置滑动条滑动方向为水平或竖直方向。默认值：Axis.Horizontal
reverse	boolean	否	设置滑动条取值范围是否反向，横向Slider默认为从左往右滑动，竖向Slider默认为从上往下滑动。默认值：false

SliderStyle枚举说明

名称	描述
OutSet	滑块在滑轨上。
InSet	滑块在滑轨内。

1.3 常用属性

支持除触摸热区以外的通用属性设置。

名称	参数类型	描述
blockColor	ResourceColor	设置滑块的颜色。从API version 9开始，该接口支持在ArkTS卡片中使用。
trackColor	ResourceColor	设置滑轨的背景颜色。从API version 9开始，该接口支持在ArkTS卡片中使用。
selectedColor	ResourceColor	设置滑轨的已滑动部分颜色。从API version 9开始，该接口支持在ArkTS卡片中使用。
showSteps	boolean	设置当前是否显示步长刻度值。默认值：false从API version 9开始，该接口支持在ArkTS卡片中使用。
showTips	boolean	设置滑动时是否显示百分比气泡提示。默认值：false从API version 9开始，该接口支持在ArkTS卡片中使用。说明：当direction的属性值为Axis.Horizontal时，tip显示在滑块正上方。值为Axis.Vertical时，tip显示在滑块正左边。tip的绘制区域为Slider自身节点的overlay。Slider不设置边距，或者边距比较小时，tip会被截断。
trackThickness	Length	设置滑轨的粗细。默认值：当参数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枚举说明

名称	值	描述
Begin	0	手势/鼠标接触或者按下滑块。
Moving	1	正在拖动滑块过程中。
End	2	手势/鼠标离开滑块。
Click	3	点击滑动条使滑块位置移动。

1.5 案例

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

@Entry
@Component
struct 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

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

• total

total属性用于设置总值。

• type

type属性用于设置进度条类型，可通过ProgressType枚举类型进行设置，可选的枚举值如下

名称	描述	效果
ProgressType.Linear	线性样式
ProgressType.Ring	环形无刻度样式
ProgressType.Eclipse	月食样式
ProgressType.ScaleRing	环形有刻度样式
ProgressType.Capsule	胶囊样式

示例代码：

component目录下新建progress目录，新建ProgressParameter.ets文件

@Entry
@Component
struct 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

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

• scaleCount

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

• scaleWidth

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+编程、企业级项目实战等原创内容，防止迷路，欢迎关注！