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

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

摘要

作者:红目香薰

团队:坚果派

团队介绍:坚果派由坚果创建,团队拥有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%')

 }

}

 

实际效果:

相关文章
|
5月前
|
数据安全/隐私保护
HarmonyOS-UIAbitity-TextArea——【坚果派-红目香薰】
HarmonyOS-UIAbitity-TextArea——【坚果派-红目香薰】
37 0
|
5月前
HarmonyOS-UIAbitity-Text——【坚果派-红目香薰】
HarmonyOS-UIAbitity-Text——【坚果派-红目香薰】
22 0
|
5月前
HarmonyOS-UIAbitity-StepperItem——【坚果派-红目香薰】
HarmonyOS-UIAbitity-StepperItem——【坚果派-红目香薰】
26 0
|
5月前
|
索引
HarmonyOS-UIAbitity-Stepper——【坚果派-红目香薰】
HarmonyOS-UIAbitity-Stepper——【坚果派-红目香薰】
32 0
|
5月前
HarmonyOS-UIAbitity-Span——【坚果派-红目香薰】
HarmonyOS-UIAbitity-Span——【坚果派-红目香薰】
41 0
|
5月前
|
索引
HarmonyOS-UIAbitity-Select——【坚果派-红目香薰】
HarmonyOS-UIAbitity-Select——【坚果派-红目香薰】
35 0
|
1天前
|
UED
鸿蒙next版开发:相机开发-适配不同折叠状态的摄像头变更(ArkTS)
在HarmonyOS 5.0中,ArkTS提供了强大的相机开发能力,特别是针对折叠屏设备的摄像头适配。本文详细介绍了如何在ArkTS中检测和适配不同折叠状态下的摄像头变更,确保相机应用在不同设备状态下的稳定性和用户体验。通过代码示例展示了具体的实现步骤。
18 8
|
1天前
|
API 内存技术
鸿蒙next版开发:相机开发-拍照(ArkTS)
在HarmonyOS 5.0中,ArkTS提供了一套完整的API来管理相机功能,特别是拍照功能。本文详细介绍如何在ArkTS中实现拍照功能,包括导入接口、创建会话、配置会话、触发拍照及监听拍照输出流状态,并提供代码示例进行详细解读。通过本文,你将掌握如何在HarmonyOS 5.0中使用ArkTS实现高效的拍照功能。
18 7
|
1天前
|
监控 开发者
鸿蒙next版开发:使用HiDebug获取调试信息(ArkTS)
在HarmonyOS 5.0中,HiDebug是一个强大的应用调试工具,可帮助开发者获取系统的CPU使用率、内存信息等关键性能数据。本文详细介绍了如何在ArkTS中使用HiDebug,并提供了示例代码,帮助开发者进行性能分析和问题诊断。
16 7
|
1天前
|
前端开发 API
鸿蒙next版开发:相机开发-预览(ArkTS)
在HarmonyOS 5.0中,使用ArkTS进行相机预览是核心功能之一。本文详细介绍了如何使用ArkTS实现相机预览,包括导入相机接口、创建Surface、获取相机输出能力、创建会话并开始预览,以及监听预览输出状态等步骤,并提供了代码示例。通过本文,读者可以掌握在HarmonyOS 5.0中使用ArkTS进行相机预览的基本方法。
16 6

热门文章

最新文章