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

17.ArkUI Slider的介绍和使用

ai 2025/7/6 21:24:35

ArkUI Slider 组件介绍与使用指南

什么是 Slider 组件？

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

Slider 的核心特性

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

基本使用方法

水平 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 })}
}

注意事项

  1. 性能考虑：避免在 onChange 回调中执行耗时操作，可能导致滑动不流畅
  2. 步长设置：根据实际需求合理设置 step 属性，太小可能导致用户难以精确选择
  3. 垂直方向：垂直 Sl
http://www.xdnf.cn/news/2027.html

相关文章：

  • 免费的车牌势识别系统
  • 电商数据中台架构：淘宝 API 实时采集与多源数据融合技术拆解
  • Chrmo手动同步数据
  • 在虚拟机中安装Linux详细教程
  • PyQt6基础_QTableWidget
  • MSVCP140.dll丢失的解决方法：详细修复指南进一步了解MSVCP140.dll
  • SCI论文结构笔记
  • 【鸿蒙HarmonyOS】深入理解一端开发,多端部署
  • WINDOWS 下Maven 安装及配置教程
  • javaweb-cook-会话
  • 力扣热题——统计最大组的数目
  • 黑马Redis（三）黑马点评项目
  • 【昇腾】【训练】800TA2-910B使用LLaMA-Factory训练Qwen
  • 系统架构师2025年论文《微服务架构3》
  • 软件开发管理制度，项目研发制度，项目管理制度
  • 解决Spring Boot多模块自动配置失效问题
  • 如何把两个视频合并成一个视频？无需视频编辑器即可搞定视频合并
  • 【Java面试笔记：进阶】19.Java并发包提供了哪些并发工具类？
  • linux基础操作1------（文件命令）
  • STM32系列官方标准固件库的完整下载流程
  • MySql 数据 结构 转为SqlServer （简单）
  • WSL2-自定义安装
  • LLM数学推导——Transformer问题集——注意力机制——稀疏/高效注意力
  • Kafka与Spark-Streaming
  • 7.0 sharpScada的sql数据的安装
  • Oracle Recovery Tools修复ORA-00742、ORA-600 ktbair2: illegal inheritance故障
  • ubuntu使用dify源码安装部署教程+避坑指南
  • 系统架构-安全架构设计
  • PS读写BRAM
  • 【从零开始：自制一个Java消息队列（MQ）】