HarmonyOS-UIAbitity-Slider——【坚果派-红目香薰】

红目香薰

发布于 2024-02-24 09:22:40

1080

发布于 2024-02-24 09:22:40

文章被收录于专栏：CSDNToQQCode

摘要

作者：红目香薰团队：坚果派团队介绍：坚果派由坚果创建，团队拥有12个华为HDE以及若干其他领域的三十余位万粉博主运营。

Slider

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

接口

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

参数：

参数名	参数类型	必填	参数描述
value	number	否	当前进度值。默认值：0
min	number	否	设置最小值。默认值：0
max	number	否	设置最大值。默认值：100
step	number	否	设置滑动条滑动步长。默认值：1
style	SliderStyle	否	设置滑动条的滑块样式。默认值：SliderStyle.OutSet
direction8+	Axis	否	设置滑动条滑动方向为水平或竖直方向。默认值：Axis.Horizontal
reverse8+	boolean	否	设置滑动条取值范围是否反向。说明：设置为false时，水平方向滑动条为从左向右滑动，竖直方向滑动条从上向下滑动，设置为true时，水平方向滑动条为从右向左滑动，竖直方向滑动条从下向上滑动。默认值：false

SliderStyle枚举说明

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

属性

不支持触摸热区设置。

名称	参数类型	描述
blockColor	ResourceColor	设置滑块的颜色。
trackColor	ResourceColor	设置滑轨的背景颜色。
selectedColor	ResourceColor	设置滑轨的已滑动颜色。
showSteps	boolean	设置当前是否显示步长刻度值。默认值：false
showTips	boolean	设置滑动时是否显示气泡提示百分比。默认值：false
trackThickness	Length	设置滑轨的粗细。
maxLabel	string	设置最大标签。
minLabel	string	设置最小标签。

事件

通用事件仅支持：OnAppear，OnDisAppear。

名称	功能描述
onChange(callback: (value: number, mode: SliderChangeMode) => void)	Slider滑动时触发事件回调。 value：当前进度值。 mode：拖动状态。

SliderChangeMode枚举说明

名称	值	描述
Begin	0	用户开始拖动滑块。
Moving	1	用户拖动滑块中。
End	2	用户结束拖动滑块。
Click	3	用户点击滑动条使滑块位置移动。

代码示例

 @Entry
 @Component
 struct Index {
   @State outSetValueOne: number = 40;
   @State inSetValueOne: number = 40;
   @State outSetValueTwo: number = 40;
   @State inSetValueTwo: number = 40;
   @State vOutSetValueOne: number = 40;
   @State vInSetValueOne: number = 40;
   @State vOutSetValueTwo: number = 40;
   @State vInSetValueTwo: number = 40;
   build() {
     Column({ space: 8 }) {
       Text('outset slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15)
       Row() {
         Slider({
           value: this.outSetValueOne,
           min: 0,
           max: 100,
           style: SliderStyle.OutSet
         })
           .showTips(true)
           .onChange((value: number, mode: SliderChangeMode) => {
             this.outSetValueOne = value;
             console.info('value:' + value + 'mode:' + mode.toString());
           })
         // toFixed(0)将滑动条返回值处理为整数精度
         Text(this.outSetValueOne.toFixed(0)).fontSize(12)
       }
       .width('80%')
       Row() {
         Slider({
           value: this.outSetValueTwo,
           step: 10,
           style: SliderStyle.OutSet
         })
           .showSteps(true)
           .onChange((value: number, mode: SliderChangeMode) => {
             this.outSetValueTwo = value;
             console.info('value:' + value + 'mode:' + mode.toString());
           })
         Text(this.outSetValueTwo.toFixed(0)).fontSize(12)
       }
       .width('80%')
       Text('inset slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15)
       Row() {
         Slider({
           value: this.inSetValueOne,
           min: 0,
           max: 100,
           style: SliderStyle.InSet
         })
           .blockColor('#191970')
           .trackColor('#ADD8E6')
           .selectedColor('#4169E1')
           .showTips(true)
           .onChange((value: number, mode: SliderChangeMode) => {
             this.inSetValueOne = value;
             console.info('value:' + value + 'mode:' + mode.toString());
           })
         Text(this.inSetValueOne.toFixed(0)).fontSize(12)
       }
       .width('80%')
       Row() {
         Slider({
           value: this.inSetValueTwo,
           step: 10,
           style: SliderStyle.InSet
         })
           .blockColor('#191970')
           .trackColor('#ADD8E6')
           .selectedColor('#4169E1')
           .showSteps(true)
           .onChange((value: number, mode: SliderChangeMode) => {
             this.inSetValueTwo = value;
             console.info('value:' + value + 'mode:' + mode.toString());
           })
         Text(this.inSetValueTwo.toFixed(0)).fontSize(12)
       }
       .width('80%')
       Row() {
         Column() {
           Text('vertical outset slider').fontSize(9).fontColor(0xCCCCCC).width('50%').margin(15)
           Row() {
             Slider({
               value: this.vOutSetValueOne,
               style: SliderStyle.OutSet,
               direction: Axis.Vertical
             })
               .blockColor('#191970')
               .trackColor('#ADD8E6')
               .selectedColor('#4169E1')
               .showTips(true)
               .onChange((value: number, mode: SliderChangeMode) => {
                 this.vOutSetValueOne = value;
                 console.info('value:' + value + 'mode:' + mode.toString());
               })
             Slider({
               value: this.vOutSetValueTwo,
               step: 10,
               style: SliderStyle.OutSet,
               direction: Axis.Vertical
             })
               .blockColor('#191970')
               .trackColor('#ADD8E6')
               .selectedColor('#4169E1')
               .showSteps(true)
               .onChange((value: number, mode: SliderChangeMode) => {
                 this.vOutSetValueTwo = value;
                 console.info('value:' + value + 'mode:' + mode.toString());
               })
           }
         }.width('50%').height(300)
         Column() {
           Text('vertical inset slider').fontSize(9).fontColor(0xCCCCCC).width('50%').margin(15)
           Row() {
             Slider({
               value: this.vInSetValueOne,
               style: SliderStyle.InSet,
               direction: Axis.Vertical,
               reverse: true // 竖向的Slider默认是上端是min值，下端是max值，因此想要从下往上滑动，需要设置reverse为true
             })
               .showTips(true)
               .onChange((value: number, mode: SliderChangeMode) => {
                 this.vInSetValueOne = value;
                 console.info('value:' + value + 'mode:' + mode.toString());
               })
             Slider({
               value: this.vInSetValueTwo,
               step: 10,
               style: SliderStyle.InSet,
               direction: Axis.Vertical,
               reverse: true
             })
               .showSteps(true)
               .onChange((value: number, mode: SliderChangeMode) => {
                 this.vInSetValueTwo = value;
                 console.info('value:' + value + 'mode:' + mode.toString());
               })
           }
         }.width('50%').height(300)
       }
     }.width('100%')
   }
 }

实际效果：