鸿蒙应用开发从入门到实战（十三）：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卡片中使用。

参数说明：

SliderStyle枚举说明

1.3 常用属性

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

1.4 事件

通用事件仅支持挂载卸载事件：OnAppear，OnDisAppear。

SliderChangeMode枚举说明

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枚举类型进行设置，可选的枚举值如下

示例代码：

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