鸿蒙Harmony应用开发—ArkTS声明式开发(基础手势:Slider)

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

说明:

该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

子组件

接口

Slider(options?: SliderOptions)

卡片能力: 从API version 9开始,该接口支持在ArkTS卡片中使用。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名类型必填描述
optionsSliderOptions配置滑动条的参数。

SliderOptions对象说明

名称类型必填说明
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卡片中使用。
说明:
默认值:'#ffffff'。
当滑块形状设置为SliderBlockType.DEFAULT时,blockColor可设置默认圆形滑块颜色;
当滑块形状设置为SliderBlockType.IMAGE时,滑块无填充,设置blockColor不生效;
当滑块形状设置为SliderBlockType.SHAPE时,blockColor可设置自定义形状的填充颜色。
trackColorResourceColor设置滑轨的背景颜色。
从API version 9开始,该接口支持在ArkTS卡片中使用。
说明:
默认值:'#19182431'。
selectedColorResourceColor设置滑轨的已滑动部分颜色。
从API version 9开始,该接口支持在ArkTS卡片中使用。
说明:
默认值:'#007dff'。
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会被截断。
trackThickness8+Length设置滑轨的粗细。
默认值:当参数style的值设置SliderStyle.OutSet 时为 4.0vp,SliderStyle.InSet时为20.0vp
从APIversion9开始,该接口支持在ArkTS卡片中使用。
说明:
设置为小于等于0的值时,取默认值。
blockBorderColor10+ResourceColor设置滑块描边颜色。
说明:
默认值:'#ffffff'。
当滑块形状设置为SliderBlockType.DEFAULT时,blockBorderColor可设置默认圆形滑块描边颜色;
当滑块形状设置为SliderBlockType.IMAGE时,滑块无描边,设置blockBorderColor不生效;
当滑块形状设置为SliderBlockType.SHAPE时,blockBorderColor可设置自定义形状中线的颜色。
blockBorderWidth10+Length设置滑块描边粗细。
说明:
当滑块形状设置为SliderBlockType.DEFAULT时,blockBorderWidth可设置默认圆形滑块描边粗细;
当滑块形状设置为SliderBlockType.IMAGE时,滑块无描边,设置blockBorderWidth不生效;
当滑块形状设置为SliderBlockType.SHAPE时,blockBorderWidth可设置自定义形状中线的粗细。
stepColor10+ResourceColor设置刻度颜色。
说明:
默认值:'#19182431'。
trackBorderRadius10+Length设置底板圆角半径。
说明:
默认值:'2vp'。
blockSize10+SizeOptions设置滑块大小。
说明:
默认值:当参数style的值设置为SliderStyle.OutSet 时为:{width: 16, height: 16},当参数style的值设置为SliderStyle.InSet时为:{width: 12, height: 12}。
当设置的bolckSize的宽高值不相等时,取较小值的尺寸,当设置的宽高值中有一个或两个都小于等于0的时候,取默认值。
blockStyle10+SliderBlockStyle设置滑块形状参数。
说明:
默认值:SliderBlockType.DEFAULT,使用圆形滑块。
stepSize10+Length设置刻度大小(直径)。
说明:
默认值:'4vp'。
当值为0时,刻度点不显示,当值小于0时,取默认值。
minLabeldeprecatedstring设置最小值。
从APIversion9开始废弃,使用min替代。
maxLabeldeprecatedstring设置最大值。
从APIversion9开始废弃,使用max替代。

说明:

  • Slider无默认padding。
  • 当Slider为水平滑动条时,Slider默认高度为40vp,宽度为父容器的宽度,滑动条居中显示,左右间距为分别为10vp,若设置padding,padding不会覆盖左右间距。
  • 当Slider为竖直滑动条时,Slider默认宽度为40vp,高度为父容器的高度,滑动条居中显示,上下间距为分别为6vp,若设置padding,padding不会覆盖上下间距。

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() {
            Text().width('10%')
            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, this.tipsValue.toFixed())
        .onChange(value => {
          this.tipsValue = value
        })
    }
  }
}

最后,有很多小伙伴不知道学习哪些鸿蒙开发技术?不知道需要重点掌握哪些鸿蒙应用开发知识点?而且学习时频繁踩坑,最终浪费大量时间。所以有一份实用的鸿蒙(Harmony NEXT)资料用来跟着学习是非常有必要的。 

这份鸿蒙(Harmony NEXT)资料包含了鸿蒙开发必掌握的核心知识要点,内容包含了ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等)鸿蒙(Harmony NEXT)技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助,有需要的小伙伴自行领取,限时开源,先到先得~无套路领取!!

获取这份完整版高清学习路线,请点击→纯血版全套鸿蒙HarmonyOS学习资料

腾讯T10级高工技术,安卓全套VIP内容 →Android全套学习资料

腾讯T10级高工技术,安卓全套VIP课程

鸿蒙(Harmony NEXT)最新学习路线

  •  HarmonOS基础技能

  • HarmonOS就业必备技能 
  •  HarmonOS多媒体技术

  • 鸿蒙NaPi组件进阶

  • HarmonOS高级技能

  • 初识HarmonOS内核 
  • 实战就业级设备开发

有了路线图,怎么能没有学习资料呢,小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙(OpenHarmony )学习手册(共计1236页)鸿蒙(OpenHarmony )开发入门教学视频,内容包含:ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线,请点击→纯血版全套鸿蒙HarmonyOS学习资料

《鸿蒙 (OpenHarmony)开发入门教学视频》

《鸿蒙生态应用开发V2.0白皮书》

图片

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

图片

 《鸿蒙开发基础》

  • ArkTS语言
  • 安装DevEco Studio
  • 运用你的第一个ArkTS应用
  • ArkUI声明式UI开发
  • .……

图片

 《鸿蒙开发进阶》

  • Stage模型入门
  • 网络管理
  • 数据管理
  • 电话服务
  • 分布式应用开发
  • 通知与窗口管理
  • 多媒体技术
  • 安全技能
  • 任务管理
  • WebGL
  • 国际化开发
  • 应用测试
  • DFX面向未来设计
  • 鸿蒙系统移植和裁剪定制
  • ……

图片

《鸿蒙进阶实战》

  • ArkTS实践
  • UIAbility应用
  • 网络案例
  • ……

图片

 获取以上完整鸿蒙HarmonyOS学习资料,请点击→纯血版全套鸿蒙HarmonyOS学习资料

总结

总的来说,华为鸿蒙不再兼容安卓,对中年程序员来说是一个挑战,也是一个机会。只有积极应对变化,不断学习和提升自己,他们才能在这个变革的时代中立于不败之地。 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/451927.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Linux:时间指令 - cal date

Linux:时间指令 - cal & date date指令cal指令 date指令 date用于以指定格式显示时间 我们先看看直接输入date指令的效果: [hxyiZ2zehtehrgzt3wqccrpyfZ CSDN]$ date Tue Mar 12 21:38:01 CST 2024直接输入date指令,得到了以 星期 月 日…

RANDOMIZE-IN-PLACE随机排列算法

给定一个长度为 n n n的数组,如何构造出一个随机排列呢?《算法导论》给了我们一个名为RANDOMIZE-IN-PLACE的随机算法,该算法在数组原址上进行排序,时间复杂度为 O ( n ) O(n) O(n)。下面本文将介绍RANDOMIZE-IN-PLACE的设计思想及…

基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的水下目标检测系统(深度学习模型+UI界面+训练数据集)

摘要:本研究详述了一种采用深度学习技术的水下目标检测系统,该系统集成了最新的YOLOv8算法,并与YOLOv7、YOLOv6、YOLOv5等早期算法进行了性能评估对比。该系统能够在各种媒介——包括图像、视频文件、实时视频流及批量文件中——准确地识别水…

HarmonyOS NEXT应用开发之多层嵌套类对象监听

介绍 本示例介绍使用Observed装饰器和ObjectLink装饰器来实现多层嵌套类对象属性变化的监听。 效果图预览 使用说明 加载完成后显示商品列表,点击刷新按钮可以刷新商品图片和价格。 实现思路 创建FistGoodsModel类,类对象是用Observed修饰的类Secon…

Linux运维:磁盘分区与挂载详解

Linux运维:磁盘分区与挂载详解 1、磁盘分区的原理2、查看系统中所有的磁盘设备及其分区信息3、进行磁盘分区(对于sdb新磁盘)4、格式化分区5、挂载分区(临时挂载、永久挂载)6、取消挂载分区7、删除分区 💖Th…

pytorch激活函数

目录 1.激活函数由来2. 常见激活函数2.1 Sigmoid2.2 Tanh2.3 relu 1.激活函数由来 科学家对青蛙的神经元进行研究的时候发现,只有超过一定的阈值青蛙才会有反应,因此不能将多个输入做简单的加权平均,而需要一个阶梯函数也就是激活函数&#…

软考75-上午题-【面向对象技术3-设计模式】-设计模式的要素

一、题型概括 上午、下午题(试题五、试题六,二选一) 每一个设计模式都有一个对应的类图。 二、23种设计模式 创建型设计模式:5 结构型设计模式:7 行为设计模式:11 考试考1-2种。 三、设计模式的要素 3…

基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的烟雾检测系统详解(深度学习模型+UI界面升级版+训练数据集)

摘要:本研究详细介绍了一种集成了最新YOLOv8算法的烟雾检测系统,并与YOLOv7、YOLOv6、YOLOv5等早期算法进行性能评估对比。该系统能够在包括图像、视频文件、实时视频流及批量文件中准确识别烟雾。文章深入探讨了YOLOv8算法的原理,提供了Pyth…

cocos2d-x-3.17 android升级 gradle NDK_DEBUG=0 -o NDK_DEBUG=1 -o cocos2dlua_shared

由于需要升级sdk版本 需要对应升级gradle版本 记录下升级内容 externalNativeBuild { ndkBuild { - //arguments NDK_DEBUG0 -o 修改成下面 arguments NDK_DEBUG0 } } debug { …

抓取Instagram数据:Fizzler库带您进入C#爬虫程序的世界

引言 在当今数字化的世界中,数据是无价之宝。社交媒体平台如Instagram成为了用户分享照片、视频和故事的热门场所。作为开发人员,我们可以利用爬虫技术来抓取这些平台上的数据,进行分析、挖掘和应用。本文将介绍如何使用C#编写一个简单的Ins…

JavaWeb-Maven

一、Maven概述 Maven是专门用于管理和构建Java项目的工具,它的主要功能有: 提供一套标准化的项目结构提供一套标准化的构建流程(编译,测试,打包,发布......)提供一套依赖管理机制 二、Maven简…

Mysql数据库问题

一、索引 索引分类:主键索引,普通索引,复合索引,唯一索引技术名词:回表,最左匹配,索引覆盖,索引下推 二、explain 之前已有文章讲解:优化器-SQL语句分析与优化 这里我…

爬虫案例1

通过get请求直接获取电影信息 目标页面: https://spa6.scrape.center/在network中可以看到是通过Ajax发送的请求,这个请求在postman中也可以直接请求成功,这只是一个用来练习爬虫的,没有达到js逆向的过程,需要通过分析js 代码来获…

C++开发基础——IO操作与文件流

一,基础概念 C的IO操作是基于字节流,并且IO操作与设备无关,同一种IO操作可以在不同类型的设备上使用。 C的流是指流入/流出程序的字节序列,在输入操作中数据从外部设备(键盘,文件,网络等)流入程序&#x…

lnmp环境部署-im

安装nginx 配置nginx源 vim /etc/yum.repos.d/nginx.repo [nginx-stable] namenginx stable repo baseurlhttp://nginx.org/packages/centos/$releasever/$basearch/ gpgcheck1 enabled1 gpgkeyhttps://nginx.org/keys/nginx_signing.key module_hotfixestrue安装nginx yum …

【开源】SpringBoot框架开发假日旅社管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 系统介绍2.2 QA 问答 三、系统展示四、核心代码4.1 查询民宿4.2 新增民宿评论4.3 查询民宿新闻4.4 新建民宿预订单4.5 查询我的民宿预订单 五、免责说明 一、摘要 1.1 项目介绍 基于JAVAVueSpringBootMySQL的假日旅社…

产品推荐 - ALINX XILINX FPGA开发板 Artix-7 XC7A100T-2FGG484I

01开发板介绍 此款开发板采用核心板扩展板的模式,方便用户对核心板的二次开发利用。FPGA使用的是Xilinx公司的ARTIX-7系列的芯片,型号为XC7A100T-2FGG484I。在核心板使用了2片MICRON公司的MT41J256M16HA-125 DDR3芯片,组合成32bit的数据总线…

Java日志框架Log4j 2详解

目录 一、什么是日志? 二、日志的主要用途 三、常用日志框架 1、Apache Log4j 2、Commons Logging 3、SLF4J 4、Logback 5、JUL(Java Util Logging) 6、Log4j 2 四、log4j 2 的优点 五、Log4j 2下载和配置 1、访问Log4j – 下载 Apache Log4j™ 2官网&a…

Linux内核之kstrdup代码实例(二十六)

简介: CSDN博客专家,专注Android/Linux系统,分享多mic语音方案、音视频、编解码等技术,与大家一起成长! 优质专栏:Audio工程师进阶系列【原创干货持续更新中……】🚀 优质专栏:多媒…

【数据结构】线性表的定义及基本操作

文章目录 前言线性表的定义线性表的基本操作基本操作其他常用操作 总结 前言 数据结构的三要素是逻辑结构、数据的运算、存储结构(物理结构),存储结构不同,运算的实现方式也不同。 本次文章包括线性表的定义和基本操作&#xff0…