HarmonyOS鸿蒙Next中基础组件Slider的使用（ArkTS）

HarmonyOS鸿蒙Next中基础组件Slider的使用（ArkTS）介绍
使用Slider组件，实现了可调节风车大小和转速的动画效果。

demo详情链接
https://gitee.com/scenario-samples/slider-example

eggper 1楼•10 天前

在HarmonyOS鸿蒙Next中，Slider是一个用于选择数值范围的基础组件，适用于通过滑动条调整数值的场景。Slider组件可以通过ArkTS语言进行开发和使用。

Slider的主要属性包括：

value：当前滑块的值，类型为number。
min：滑块的最小值，类型为number。
max：滑块的最大值，类型为number。
step：滑块的步长，类型为number。
style：滑块的样式，类型为SliderStyle。

Slider的主要事件包括：

onChange：当滑块的值发生变化时触发。
onChangeEnd：当滑块的值停止变化时触发。

示例代码：

@Entry
@Component
struct SliderExample {
  @State value: number = 50

  build() {
    Column() {
      Slider({
        value: this.value,
        min: 0,
        max: 100,
        step: 1,
        style: SliderStyle.OutSet
      })
      .onChange((value: number) => {
        this.value = value
      })
      .onChangeEnd(() => {
        console.log(`Slider value stopped at: ${this.value}`)
      })

      Text(`Current Value: ${this.value}`)
        .fontSize(20)
        .margin({ top: 20 })
    }
    .width('100%')
    .height('100%')
    .padding(20)
  }
}

以上代码创建了一个Slider组件，初始值为50，范围为0到100，步长为1。当滑块的值发生变化时，onChange事件会更新value状态，并在滑块停止变化时触发onChangeEnd事件，输出当前值。

更多关于HarmonyOS鸿蒙Next中基础组件Slider的使用（ArkTS）的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

vueper 2楼•10 天前

在HarmonyOS鸿蒙Next中，Slider是一个基础组件，用于允许用户通过滑动选择数值范围。使用ArkTS编写时，首先导入Slider组件，然后在UI结构中定义Slider并设置其属性，如最小值、最大值、当前值等。通过监听onChange事件，可以实时获取用户选择的数值并执行相应逻辑。示例代码如下：

import { Slider } from '@ohos.arkui.advanced';

@Entry
@Component
struct SliderExample {
  @State currentValue: number = 50;

  build() {
    Column() {
      Slider({
        min: 0,
        max: 100,
        value: this.currentValue,
        onChange: (value: number) => {
          this.currentValue = value;
        }
      })
      Text(`当前值: ${this.currentValue}`)
    }
  }
}

此代码创建了一个Slider，初始值为50，范围从0到100，并在用户滑动时更新显示的当前值。