当前位置：首页 > news >正文

17.ArkUI Slider的介绍和使用

news 来源：原创 2025/4/28 16:54:09

ArkUI Slider 组件介绍与使用指南

什么是 Slider 组件？

Slider（滑动条）是 ArkUI 中的滑动选择器组件，允许用户通过拖动滑块在指定范围内选择一个数值。它适用于需要用户在一个连续区间内选择特定值的场景，如音量控制、亮度调节、进度显示等。

Slider 的核心特性

范围选择：支持设置最小值和最大值
步长设置：可以设置滑动时的步长
样式定制：可自定义滑块、轨道、进度条等样式
方向控制：支持水平和垂直两种方向
事件响应：提供滑动值变化的回调

基本使用方法

水平 Slider 基础用法

@Entry
@Component
struct BasicSliderExample {@State currentValue: number = 30@State minValue: number = 0@State maxValue: number = 100build() {Column() {Text(`当前值: ${this.currentValue}`).fontSize(20).margin({ bottom: 20 })Slider({value: this.currentValue,min: this.minValue,max: this.maxValue,step: 1,style: SliderStyle.OutSet}).onChange((value: number) => {this.currentValue = value}).width('90%')Row() {Text(`最小值: ${this.minValue}`).fontSize(14).margin({ right: 20 })Text(`最大值: ${this.maxValue}`).fontSize(14)}.margin({ top: 10 })}.width('100%').height('100%').justifyContent(FlexAlign.Center)}
}

垂直 Slider 示例

@Entry
@Component
struct VerticalSliderExample {@State volume: number = 50build() {Row() {Column() {Text('音量控制').fontSize(18).margin({ bottom: 20 })Text(`${this.volume}%`).fontSize(24).fontColor('#1890ff').margin({ bottom: 20 })}.margin({ right: 30 })Slider({value: this.volume,min: 0,max: 100,step: 5,style: SliderStyle.InSet}).onChange((value: number) => {this.volume = value}).height(200).direction(Axis.Vertical)}.width('100%').height('100%').justifyContent(FlexAlign.Center)}
}

高级用法

自定义样式 Slider

@Entry
@Component
struct StyledSliderExample {@State brightness: number = 70@State isDragging: boolean = falsebuild() {Column() {Text('屏幕亮度调节').fontSize(20).fontWeight(FontWeight.Bold).margin({ bottom: 30 })Row() {Image($r('app.media.low_brightness')).width(30).height(30).margin({ right: 15 })Slider({value: this.brightness,min: 0,max: 100,step: 1,style: SliderStyle.OutSet}).blockColor(this.isDragging ? '#1890ff' : '#666666').trackColor('#e8e8e8').selectedColor('#1890ff').showSteps(true).showTips(true).onChange((value: number) => {this.brightness = value}).onSlideStart(() => {this.isDragging = true}).onSlideEnd(() => {this.isDragging = false}).width('70%')Image($r('app.media.high_brightness')).width(30).height(30).margin({ left: 15 })}Text(`${this.brightness}%`).fontSize(24).fontColor(this.isDragging ? '#1890ff' : '#333333').margin({ top: 20 })}.width('100%').height('100%').padding(20)}
}

范围选择 Slider (双滑块)

@Entry
@Component
struct RangeSliderExample {@State range: [number, number] = [20, 80]@State min: number = 0@State max: number = 100build() {Column() {Text('价格区间选择').fontSize(20).fontWeight(FontWeight.Bold).margin({ bottom: 30 })Row() {Text(`¥${this.range[0]}`).fontSize(16).fontColor('#1890ff').margin({ right: 20 })Text(`¥${this.range[1]}`).fontSize(16).fontColor('#1890ff')}Slider({value: this.range[0],min: this.min,max: this.max,step: 5,style: SliderStyle.OutSet}).blockColor('#1890ff').selectedColor('#1890ff').showTips(true).onChange((value: number) => {if (value < this.range[1]) {this.range = [value, this.range[1]]}}).width('90%')Slider({value: this.range[1],min: this.min,max: this.max,step: 5,style: SliderStyle.OutSet}).blockColor('#ff5500').selectedColor('#ff5500').showTips(true).onChange((value: number) => {if (value > this.range[0]) {this.range = [this.range[0], value]}}).width('90%').margin({ top: 20 })Text(`选择范围: ¥${this.range[0]} - ¥${this.range[1]}`).fontSize(16).margin({ top: 30 })}.width('100%').height('100%').padding(20)}
}

实际应用示例

视频播放器进度控制

@Entry
@Component
struct VideoPlayerExample {@State currentTime: number = 0@State duration: number = 360 // 6分钟视频@State isPlaying: boolean = false@State isDragging: boolean = false// 格式化时间为 mm:ssprivate formatTime(seconds: number): string {const mins = Math.floor(seconds / 60)const secs = Math.floor(seconds % 60)return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`}build() {Column() {// 视频预览区域Stack() {Image($r('app.media.video_thumbnail')).width('100%').height(200).objectFit(ImageFit.Cover)if (this.isPlaying) {Image($r('app.media.pause_icon')).width(50).height(50).onClick(() => {this.isPlaying = false})} else {Image($r('app.media.play_icon')).width(50).height(50).onClick(() => {this.isPlaying = true// 模拟播放进度setInterval(() => {if (this.isPlaying && !this.isDragging && this.currentTime < this.duration) {this.currentTime += 1}}, 1000)})}}.width('100%').height(200).justifyContent(FlexAlign.Center).margin({ bottom: 20 })// 进度条Row() {Text(this.formatTime(this.currentTime)).fontSize(12).margin({ right: 10 })Slider({value: this.currentTime,min: 0,max: this.duration,step: 1,style: SliderStyle.InSet}).blockColor('#ffffff').trackColor('#555555').selectedColor('#ff5500').showSteps(false).onChange((value: number) => {this.currentTime = value}).onSlideStart(() => {this.isDragging = true}).onSlideEnd(() => {this.isDragging = false}).width('70%')Text(this.formatTime(this.duration)).fontSize(12).margin({ left: 10 })}.width('100%').margin({ bottom: 20 })// 控制按钮Row() {Image($r('app.media.volume_icon')).width(30).height(30).margin({ right: 30 })Image($r('app.media.fullscreen_icon')).width(30).height(30)}.justifyContent(FlexAlign.Center).width('100%')}.width('100%').height('100%').padding(20)}
}

图片编辑器参数调节

@Entry
@Component
struct ImageEditorExample {@State imageSrc: Resource = $r('app.media.demo_image')@State brightness: number = 50@State contrast: number = 50@State saturation: number = 50@State sharpness: number = 50build() {Navigation() {Column() {// 图片预览Image(this.imageSrc).width('100%').height(300).objectFit(ImageFit.Contain).margin({ bottom: 30 }).filter(new ImageFilter(this.brightness / 50,   // brightness (0-2)this.contrast / 50,     // contrast (0-2)this.saturation / 50,   // saturation (0-2)this.sharpness / 50     // sharpness (0-2)))// 调节参数Column() {this.createAdjustmentSlider('亮度', this.brightness, (v) => { this.brightness = v })this.createAdjustmentSlider('对比度', this.contrast, (v) => { this.contrast = v })this.createAdjustmentSlider('饱和度', this.saturation, (v) => { this.saturation = v })this.createAdjustmentSlider('锐度', this.sharpness, (v) => { this.sharpness = v })}.padding(20).borderRadius(10).backgroundColor('#f5f5f5').margin({ bottom: 20 })// 操作按钮Row() {Button('重置', { type: ButtonType.Normal }).width(120).onClick(() => {this.brightness = 50this.contrast = 50this.saturation = 50this.sharpness = 50})Button('保存', { type: ButtonType.Capsule }).width(120).margin({ left: 20 }).backgroundColor('#1890ff')}.justifyContent(FlexAlign.Center).width('100%')}.padding(20)}.title('图片编辑')}private createAdjustmentSlider(label: string, value: number, onChange: (value: number) => void) {Column() {Row() {Text(label).fontSize(16).layoutWeight(1)Text(`${value}`).fontSize(16).fontColor('#1890ff').width(40).textAlign(TextAlign.End)}.margin({ bottom: 10 })Slider({value: value,min: 0,max: 100,step: 1,style: SliderStyle.InSet}).blockColor('#1890ff').selectedColor('#1890ff').onChange(onChange)}.margin({ bottom: 20 })}
}