ArkTS-ArkUI组件-Slider组件

最新推荐文章于 2024-10-10 11:54:20 发布

重C开始

最新推荐文章于 2024-10-10 11:54:20 发布

阅读量791

点赞数 10

文章标签：人工智能华为云鸿蒙前端 eclipse 华为 typescript

本文链接：https://blog.csdn.net/qq_74367835/article/details/139146483

版权

一.官方文档

Slider文档，可以参考学习哦！

二.基础语法

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

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

这么多参数！头大......

参数名	参数类型	必填	参数描述
value	number	否	当前进度值。默认值：参数min
min	number	否	设置最小值。默认值：0
max	number	否	设置最大值。默认值：100 说明： min >= max异常情况，min取默认值0，max取默认值100。 value不在[min, max]范围之内，取min/max，靠近min取min，靠近max取max。
step	number	否	设置Slider滑动步长。百分比默认值：1 取值范围：[0.01, max] 说明：设置小于0或的值时，按默认值显示。
style	SliderStyle	否	设置Slider的滑块与滑轨显示样式。默认值：SliderStyle.OutSet
direction8+	Axis	否	设置滑动条滑动方向为水平或竖直方向。默认值：Axis.Horizontal
reverse8+	boolean	否	设置滑动条取值范围是否反向，横向Slider默认为从左往右滑动，竖向Slider默认为从上往下滑动。默认值：false

看完这些有没有感觉整个人都清爽了不少啊！

我们直接来上效果吧！

Slider({value:7,        //当前的滑块值
        min:0,          //最小值
        max:100,        //最大值
        step:7,        //滑块的步长，就算滑块没下改变多少
        style:SliderStyle.OutSet        //滑块的显示样式，分为在滑轨上和在滑轨内
        ,direction:Axis.Horizontal,        //滑块的滑动方向
        reverse:false})                        //是否需要反向

是不是特简单啊！

补充一下SliderStyle枚举：

名称	描述
OutSet	滑块在滑轨上。
InSet	滑块在滑轨内。

三.属性

光看文档是不是就已经顿悟了！

名称	参数类型	描述
blockColor	ResourceColor	设置滑块的颜色。从API version 9开始，该接口支持在ArkTS卡片中使用。
trackColor	ResourceColor	设置滑轨的背景颜色。从API version 9开始，该接口支持在ArkTS卡片中使用。
selectedColor	ResourceColor	设置滑轨的已滑动部分颜色。从API version 9开始，该接口支持在ArkTS卡片中使用。
showSteps	boolean	设置当前是否显示步长刻度值。默认值：false 从API version 9开始，该接口支持在ArkTS卡片中使用。
showTips	boolean	设置滑动时是否显示百分比气泡提示。默认值：false 从API version 9开始，该接口支持在ArkTS卡片中使用。说明：当direction的属性值为Axis.Horizontal时，tip显示在滑块正上方。值为Axis.Vertical时，tip显示在滑块正左边。 tip的绘制区域为Slider自身节点的overlay。 Slider不设置边距，或者边距比较小时，tip会被截断。
trackThickness	Length	设置滑轨的粗细。默认值：当参数style的值设置SliderStyle.OutSet 时为 4.0vp，SliderStyle.InSet时为20.0vp。从APIversion9开始，该接口支持在ArkTS卡片中使用。说明：设置为小于0的值时，按默认值显示。

来冒个泡吧：

四.事件

事件中两个参数，分别为值和状态。

名称	功能描述
onChange(callback: (value: number, mode: SliderChangeMode) => void)	Slider滑动时触发事件回调。 value：当前滑动进度值。若返回值有小数，可使用number.toFixed()方法将数据处理为预期的精度。 mode：拖动状态。从API version 9开始，该接口支持在ArkTS卡片中使用。说明：Begin和End状态当手势点击时都会触发，Moving和Click状态当value值发生变换时触发。当连贯动作为拖动动作时，不触发Click状态。 value值的变化范围为对应步长steps数组。

名称

功能描述

onChange(callback: (value: number, mode: SliderChangeMode) => void)

Slider滑动时触发事件回调。

value：当前滑动进度值。若返回值有小数，可使用number.toFixed()方法将数据处理为预期的精度。

mode：拖动状态。

从API version 9开始，该接口支持在ArkTS卡片中使用。

说明：Begin和End状态当手势点击时都会触发，Moving和Click状态当value值发生变换时触发。

当连贯动作为拖动动作时，不触发Click状态。

value值的变化范围为对应步长steps数组。

还记得我们之前说过箭头函数vaule可以省略的嘛，别忘记前提哦——》只有一个参数

我们接着上次的功能开始增加滑块吧！

通过滑动滑块改变文本框和输入框的内容。

接下来再让我们来看看事件中的参数吧，使用console.log( )将其输出到日志进行观察。

我们分别进行点击不移动、拖动滑块、和点击滑轨移动：

发现mode的值进行相对应的变化。

SliderChangeMode枚举说明：

名称	值	描述
Begin	0	手势/鼠标接触或者按下滑块。
Moving	1	正在拖动滑块过程中。
End	2	手势/鼠标离开滑块。
Click	3	点击滑动条使滑块位置移动。