HarmonyOS 鸿蒙Next 基础组件Slider的使用(ArkTS)

发布于 1周前 作者 ionicwang 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 基础组件Slider的使用(ArkTS)

介绍

使用Slider组件,实现了可调节风车大小和转速的动画效果。

demo详情链接

https://gitee.com/scenario-samples/slider-example

1 回复

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


在HarmonyOS鸿蒙Next中,使用ArkTS(Ark TypeScript)进行开发时,Slider组件常用于滑动选择数值或范围。以下是Slider基础组件的使用示例代码,直接应用于鸿蒙场景化编程中:

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

    build() {
        Column() {
            Text('Current Value: ${this.value}')
                .fontSize(20)
                .margin({ top: 20 })

            Slider({
                value: this.value,
                range: [0, 100],
                step: 1,
                onChange: (newValue: number) => {
                    this.value = newValue
                }
            })
                .width('100%')
                .margin({ top: 20 })
        }
    }
}

上述代码展示了如何在ArkTS中创建一个包含Slider的UI组件。Slider组件通过value属性绑定当前值,range属性定义滑动范围,step属性设置步长。onChange事件处理函数用于更新Slider值的变化。

在鸿蒙系统中,Slider组件提供了直观的滑动选择体验,非常适合用于需要用户输入数值的场景,如音量调节、亮度调整等。

回到顶部