HarmonyOS6 - Slider滑动条组件案例

小学生波波2026-01-19 8:15

HarmonyOS6 - Slider滑动条组件案例

开发环境为：

开发工具：DevEco Studio 6.0.1 Release

API版本是：API21

本文所有代码都已使用模拟器测试成功！

1. Slider介绍

Slider为滑动条组件，通常用于快速调节设置值，如音量调节、亮度调节等应用场景。

官网介绍地址：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-slider

2. 实战案例

1. 案例一

1. 效果：

效果图如下：

2. 代码

代码如下：

js 复制代码

Row({ space: 3 }) {
    Text('78.24%')
    //滑动条
    Slider({
        min: 0, //最小值
        max: 100, //最大值
        value: 27.24, //当前值
        step: 0.01, //滑动步长,默认值：1
        style: SliderStyle.NONE, //设置Slider的滑块与滑轨显示样式，NONE表示无滑块
    })
        .trackColor("#cccccc")//设置滑轨的背景颜色
        .enabled(false)//设置是否允许滑动
        .selectedColor('#00a9fa')//设置滑轨的已滑动部分颜色
        .trackThickness(7)//设置滑轨的粗细
        .width('34%') //设置宽度
    Text('￥905.58')
}

2. 案例2

1. 效果

效果图如下：

2. 代码

代码如下：

js 复制代码

Row() {
    Text('78.24%')
    //滑动条组件
    Slider({
        min: 0, //最小值
        max: 100, //最大值
        value: 27.24, //当前值
        step: 0.01, //滑动步长,默认值：1
        style: SliderStyle.OutSet, //设置Slider的滑块与滑轨显示样式，NONE表示无滑块
        direction: Axis.Horizontal, //滑动方向(Horizontal-水平,Vertical-垂直)
        reverse: false //是否反向滑动
    })
        .blockSize({ width: 16, height: 16 })//设置滑块大小
        .trackColor("#ffff5e5e")//设置滑轨的背景颜色
        .selectedColor('#00a9fa')//设置滑轨的已滑动部分颜色
        .blockColor('#ffffc900')//设置Slider滑块的颜色，支持渐变色
        .trackThickness(7)//设置滑轨的粗细
        .showSteps(true)//设置当前是否显示步长刻度值
        .showTips(true)//设置滑动时是否显示气泡提示
        .enabled(true)//设置是否允许滑动
        .width('65%') //设置宽度
    Text('￥905.58')
}

最后

希望本文对你有所帮助！
本人如有任何错误或不当之处，请留言指出，谢谢！