HarmonyOS应用开发：Slider（基础组件）

最新推荐文章于 2024-09-09 22:16:18 发布
最新推荐文章于 2024-09-09 22:16:18 发布
阅读量832 收藏 22
点赞数 34
分类专栏： 鸿蒙 文章标签： harmonyos 人工智能 华为 鸿蒙 鸿蒙系统 android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/situnanQAQ/article/details/139608552
版权

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

说明：

该组件从API Version 7开始支持。

子组件

无

接口

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

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

参数：

参数名参数类型必填参数描述
valuenumber否当前进度值。
默认值：参数min
从API version 10开始，该参数支持$$双向绑定变量。
minnumber否设置最小值。
默认值：0
maxnumber否设置最大值。
默认值：100
说明：
min >= max异常情况，min取默认值0，max取默认值100。
value不在[min, max]范围之内，取min/max，靠近min取min，靠近max取max。
stepnumber否设置Slider滑动步长。
默认值：1
取值范围：[0.01, max]
说明：
设置小于0的值时，按默认值显示。
styleSliderStyle否设置Slider的滑块与滑轨显示样式。
默认值：SliderStyle.OutSet
direction8+Axis否设置滑动条滑动方向为水平或竖直方向。
默认值：Axis.Horizontal
reverse8+boolean否设置滑动条取值范围是否反向，横向Slider默认为从左往右滑动，竖向Slider默认为从上往下滑动。
默认值：false

SliderStyle枚举说明

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

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

属性

支持除触摸热区以外的通用属性。

名称参数类型描述
blockColorResourceColor设置滑块的颜色。
从API version 9开始，该接口支持在ArkTS卡片中使用。
说明：
当滑块形状设置为SliderBlockType.DEFAULT时，blockColor可设置默认圆形滑块颜色；
当滑块形状设置为SliderBlockType.IMAGE时，滑块无填充，设置blockColor不生效；
当滑块形状设置为SliderBlockType.SHAPE时，blockColor可设置自定义形状的填充颜色。
trackColorResourceColor设置滑轨的背景颜色。
从API version 9开始，该接口支持在ArkTS卡片中使用。
selectedColorResourceColor设置滑轨的已滑动部分颜色。
从API version 9开始，该接口支持在ArkTS卡片中使用。
showStepsboolean设置当前是否显示步长刻度值。
默认值：false
从API version 9开始，该接口支持在ArkTS卡片中使用。
showTipsvalue: boolean,
content10+?: ResourceStr		value：设置滑动时是否显示气泡提示。
默认值：false
content：设置气泡提示的文本内容，默认显示当前百分比。
从API version 9开始，该接口支持在ArkTS卡片中使用。
说明：
当direction的值为Axis.Horizontal时，tip显示在滑块正上方。值为Axis.Vertical时，tip显示在滑块正左边。
tip的绘制区域为Slider自身节点的overlay。
Slider不设置边距或者边距比较小时，tip会被截断。
trackThicknessLength设置滑轨的粗细。
默认值：当参数style的值设置SliderStyle.OutSet 时为 4.0vp，SliderStyle.InSet时为20.0vp
从APIversion9开始，该接口支持在ArkTS卡片中使用。
说明：
设置为小于等于0的值时，按默认值显示。
blockBorderColor10+ResourceColor设置滑块描边颜色。
说明：
当滑块形状设置为SliderBlockType.DEFAULT时，blockBorderColor可设置默认圆形滑块描边颜色；
当滑块形状设置为SliderBlockType.IMAGE时，滑块无描边，设置blockBorderColor不生效；
当滑块形状设置为SliderBlockType.SHAPE时，blockBorderColor可设置自定义形状中线的颜色。
blockBorderWidth10+Length设置滑块描边粗细。
说明：
当滑块形状设置为SliderBlockType.DEFAULT时，blockBorderWidth可设置默认圆形滑块描边粗细；
当滑块形状设置为SliderBlockType.IMAGE时，滑块无描边，设置blockBorderWidth不生效；
当滑块形状设置为SliderBlockType.SHAPE时，blockBorderWidth可设置自定义形状中线的粗细。
stepColor10+ResourceColor设置刻度颜色。
trackBorderRadius10+Length设置底板圆角半径。
blockSize10+SizeOptions设置滑块大小。
blockStyle10+SliderBlockStyle设置滑块形状参数。
stepSize10+Length设置刻度大小（直径）。

SliderBlockStyle10+对象说明

Slider组件滑块形状参数。

名称类型必填说明
typeSliderBlockType是设置滑块形状。
默认值：SliderBlockType.DEFAULT，使用圆形滑块。
imageResourceStr否设置滑块图片资源。
图片显示区域大小由blockSize属性控制，请勿输入尺寸过大的图片。
shapeCircle | Ellipse | Path | Rect 否设置滑块使用的自定义形状。

SliderBlockType10+枚举说明

Slider组件滑块形状枚举。

名称描述
DEFAULT使用默认滑块（圆形）。
IMAGE使用图片资源作为滑块。
SHAPE使用自定义形状作为滑块。

事件

支持通用事件外，还支持以下事件：

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

SliderChangeMode枚举说明

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

名称值描述
Begin0手势/鼠标接触或者按下滑块。
Moving1正在拖动滑块过程中。
End2手势/鼠标离开滑块。
Click3点击滑动条使滑块位置移动。

示例

示例1

// xxx.ets
@Entry
@Component
struct SliderExample {
  @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%')
  }
}

zh-cn_image_0000001179613854

示例2

@Entry
@Component
struct SliderExample {
  @State tipsValue: number = 40

  build() {
    Column({ space: 8 }) {
      Text('block').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%')
      Slider({ style: SliderStyle.OutSet, value: 40 })
        .blockSize({ width: 40, height: 40 })
        .blockBorderColor(Color.Red)
        .blockBorderWidth(5)
      Divider()
      Text('step').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%')
      Slider({ style: SliderStyle.InSet, value: 40, step: 10 })
        .showSteps(true)
        .stepSize(8)
        .stepColor(Color.Yellow)
      Divider()
      Text('track').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%')
      Slider({ style: SliderStyle.InSet, value: 40 })
        .trackBorderRadius(2)
      Divider()
      Text('blockStyle').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%')
      Slider({ style: SliderStyle.OutSet, value: 40 })
        .blockStyle({ type: SliderBlockType.DEFAULT })
      Slider({ style: SliderStyle.OutSet, value: 40 })
        .blockStyle({ type: SliderBlockType.IMAGE, image: $r('sys.media.ohos_app_icon') })
      Slider({ style: SliderStyle.OutSet, value: 40 })
        .blockSize({ width: '60px', height: '60px' })
        .blockColor(Color.Red)
        .blockStyle({ type: SliderBlockType.SHAPE, shape: new Path({ commands: 'M60 60 M30 30 L15 56 L45 56 Z' }) })
      Divider()
      Text('tips').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%')
      Slider({ style: SliderStyle.InSet, value: this.tipsValue })
        .showTips(true, 'value:' + this.tipsValue.toFixed())
        .onChange(value => {
          this.tipsValue = value
        })
    }
  }
}

 

写在最后

  • 如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
  • 点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
  • 关注小编，同时可以期待后续文章ing ，不定期分享原创知识。
  • 更多鸿蒙最新技术知识点，请关注作者 

「已注销」
关注
专栏目录
鸿蒙开发实战项目(三十二):slider组件的使用（JS）
sybh的博客
01-27 855
本篇Codelab主要介绍slider滑动条组件的使用。如图所示拖动对应滑动条调节风车的旋转速度以及缩放比例。
【HarmonyOS NEXT应用开发】案例131：基于Slider的滑动条
xzs51job的专栏
09-08 193
底层Progress进度条的填充色充当视频进度条的缓冲色，Progress的背景色充当视频进度条的背景色；下图主要表达的是拓展了Slider滑动手势的响应范围，红色区域就是原始的Slider响应去，上下橙色和粉色区域都是拓展的手势响应区。效果中的红色区域是Slider原始的可触摸区域，增大的橙色和粉色区主要思路是通过responseRegion这个全局属性来增大触摸热区，然后通过给热区设置平移手势来控制Slider的value来进而控制Slider的滑动，是一个类似视频软件拖动进度条的场景。
鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：Slider）
m0_64420071的博客
03-12 1362
ArkTS声明式开发（基础手势：Slider）
鸿蒙开发5.0【Slider的滑动条】
最新发布
2301_76813281的博客
09-09 1414
在HarmonyOS中，Slider组件是由ArkUI开发框架提供的滑动条组件，通常用于快速调节设置值，如音量调节、亮度调节等应用场景。
基于Slider的滑动条
hongxiaomeng的博客
07-30 508
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Slider组件
weixin_47730343的博客
02-09 1533
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Slider组件
零基础学鸿蒙编程-UI控件_Slider
蓝不蓝编程
10-31 446
什么是Slider Slider是让用户调节进度的UI控件.常见效果如下： 1.基本用法 效果图 代码 <Slider ohos:id="$+id:slider" ohos:height="match_content" ohos:width="match_parent" ohos:max="100" ohos:min="0" ohos:orientation="horizontal" o
HarmonyOS实战开发-slider组件的使用
m0_70749039的博客
03-31 1372
本篇Codelab主要介绍slider滑动条组件的使用。如图所示拖动对应滑动条调节风车的旋转速度以及缩放比例。
# HarmonyOS应用开发基础——Slider案例详解
明宇逸风的博客
09-02 600
HarmonyOS应用开发基础——Slider组件案例详解 HarmonyOS应用开发基础HarmonyOS应用开发基础——Slider组件案例详解案例详解基础代码使用xml文件java文件代码进阶（图片放大器）xml文件java文件 案例详解 基础代码使用 xml文件 <?xml version="1.0" encoding="utf-8"?> <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos
HarmonyOS应用开发基础——常见布局和常见组件（第三部分）
明宇逸风的博客
09-02 301
HarmonyOS应用开发基础——常见布局和常见组件（第三部分） HarmonyOS应用开发基础HarmonyOS应用开发基础——常见布局和常见组件（第三部分）常见组件组件分类交互类组件1.Switch时钟组件概述开发使用2.Slider滑块组件概述常用属性常用方法3.ListContainer组件概述案例详解Picker组件概述案例详解DatePicker和TimePicker组件概述案例详解 常见组件 组件分类 显示类组件 只负责数据展示的，无法跟用户交互，比如展示文本的组件，展示图片的组件。 交互类组
鸿蒙开发组件之Slider
Lu_Ca的博客
12-09 727
小tips：如果不知道需要设置什么，可以通过看官方文档，而且是中文版，真的是遥遥领先，👍。设置滑动条的高度不能用height，要用trackThickness属性。也可以通过showTips值来设置是否有上方的value小提示。Slider滑动条值改变是通过onChange方法监听的。其中如果滑块style属性对应的值是inset，那么是。相关初始化属性对应样式如下。
HarmonyOS Next开发学习手册——旋转屏动画增强
maniuT的博客
07-03 688
在原旋转屏动画基础上，可配置渐隐和渐现的转场效果。完整的代码示例和效果如下。需要在EntryAbility.ets文件的onWindowStageCreate方法中添加处理逻辑以获取屏幕的显示方向需要在项目的 module.json5 文件中的 abilities 列表里添加 “orientation”，指定为 “auto_rotation”
鸿蒙HarmonyOS开发：渲染展示图片组件-image
2401_84917132的博客
08-16 719
image是图片组件，用来渲染展示图片。
ArkTS组件--Slider组件（滑动条组件）
qq_53312564的博客
12-05 754
【代码】ArkTS组件--Slider组件（滑动条组件）
鸿蒙开发实战项目(二十八):基础组件Slider的使用（ArkTS）
sybh的博客
01-27 1110
在本教程中，我们将通过一个简单的样例，学习如何使用声明式UI编程框架的基础组件。
ArkTS-ArkUI组件-Slider组件
qq_74367835的博客
05-24 811
ArkTS-ArkUI组件-Slider组件
【HarmonyOS】鸿蒙开发之Slider组件——第3.5章
我的开源项目:https://gitee.com/derekgo/vue-cms_xg
02-19 1179
沉默小管 鸿蒙开发之Slider组件
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值