鴻蒙應(yīng)用開發(fā)從入門到實戰(zhàn)（十三）：ArkUI組件Slider&Progress

大家好，我是潘Sir，持續(xù)分享IT技術(shù)，幫你少走彎路。《鴻蒙應(yīng)用開發(fā)從入門到項目實戰(zhàn)》系列文章持續(xù)更新中，陸續(xù)更新AI+編程、企業(yè)級項目實戰(zhàn)等原創(chuàng)內(nèi)容、歡迎關(guān)注！

ArkUI提供了豐富的系統(tǒng)組件，用于制作鴻蒙原生應(yīng)用APP的UI，本文主要講解滑塊Slider和進(jìn)度條Progress組件的使用。

一、滑塊Slider

1.1 概述

滑動條組件，通常用于快速調(diào)節(jié)設(shè)置值，如音量調(diào)節(jié)、亮度調(diào)節(jié)等應(yīng)用場景。

1.2 參數(shù)

Slider組件的參數(shù)定義如下

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

從API version 9開始，該接口支持在ArkTS卡片中使用。

參數(shù)說明：

SliderStyle枚舉說明

1.3 常用屬性

支持除觸摸熱區(qū)以外的通用屬性設(shè)置。

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)
  }
}

二、進(jìn)度條Progress

2.1 概述

Progress為進(jìn)度條組件，用于顯示各種進(jìn)度。

2.2 參數(shù)

Progress組件的參數(shù)定義如下

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

• value

value屬性用于設(shè)置當(dāng)前進(jìn)度值。

• total

total屬性用于設(shè)置總值。

• type

type屬性用于設(shè)置進(jìn)度條類型，可通過ProgressType枚舉類型進(jìn)行設(shè)置，可選的枚舉值如下

名稱	描述	效果
ProgressType.Linear	線性樣式
ProgressType.Ring	環(huán)形無刻度樣式
ProgressType.Eclipse	月食樣式
ProgressType.ScaleRing	環(huán)形有刻度樣式
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('進(jìn)度-1')
          .onClick(() => {
            if (this.value > 0) {
              this.value--;
            }
          })
        Button('進(jìn)度+1')
          .onClick(() => {
            if (this.value < this.total) {
              this.value++;
            }
          })
      }
    }.width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

2.3 常用屬性

2.3.1 進(jìn)度條樣式

可通過style()調(diào)整進(jìn)度條的樣式，例如進(jìn)度條的寬度，該方法的參數(shù)類型定義如下

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

• strokeWidth

strokeWidth屬性用于設(shè)置進(jìn)度條的寬度，默認(rèn)值為4vp。該屬性可用于Linear、Ring、ScaleRing三種類型，效果如下

• scaleCount

scaleCount屬性用于設(shè)置ScaleRing的刻度數(shù)，默認(rèn)值為120。效果如下

• scaleWidth

scaleCount屬性用于設(shè)置ScaleRing的刻度線的寬度，默認(rèn)值為2vp。效果如下

示例代碼：

在progress目錄下新建ProgressAttributePage.ets文件

@Entry
@Component
// 進(jìn)度條progress樣式 style（）
struct ProgressAttributePage {

  build() {
    Column({ space: 50 }) {
      // strokeWidth屬性用于設(shè)置進(jìn)度條的寬度，默認(rèn)值為4vp
      // scaleCount屬性用于設(shè)置ScaleRing的刻度數(shù)，默認(rèn)值為120
      // scaleCount屬性用于設(shè)置ScaleRing的刻度線的寬度，默認(rèn)值為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 進(jìn)度條顏色

進(jìn)度條的顏色可通過color()和backgroundColor()方法進(jìn)行設(shè)置，其中color()用于設(shè)置前景色，backgroundColor()用于設(shè)置背景色，例如

示例代碼：

在progress目錄下新建ProgressColor.ets文件

@Entry
@Component
// 進(jìn)度條progress顏色
struct ProgressColor {

  build() {
    Column({ space: 50 }) {
      // 進(jìn)度條的顏色可通過color()和backgroundColor()方法進(jìn)行設(shè)置，
      // 其中color()用于設(shè)置前景色，backgroundColor()用于設(shè)置背景色
      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)
  }
}

《鴻蒙應(yīng)用開發(fā)從入門到項目實戰(zhàn)》系列文章持續(xù)更新中，陸續(xù)更新AI+編程、企業(yè)級項目實戰(zhàn)等原創(chuàng)內(nèi)容，防止迷路，歡迎關(guān)注！