鸿蒙：滑动条组件Slider

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

说明

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

子组件

无

接口

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

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

参数：

参数名

参数类型

必填

参数描述

value

number

否

当前进度值。

默认值：参数min

min

number

否

设置最小值。

默认值：0

max

number

否

设置最大值。

默认值：100

说明：

min >= max异常情况，min取默认值0，max取默认值100。

value不在[min, max]范围之内，取min/max，靠近min取min，靠近max取max。

step

number

否

设置Slider滑动步长。

默认值：1

取值范围：[0.01, max]

说明：

设置小于0或百分比的值时，按默认值显示。

style

SliderStyle

否

设置Slider的滑块与滑轨显示样式。

默认值：SliderStyle.OutSet

direction8+

Axis

否

设置滑动条滑动方向为水平或竖直方向。

默认值：Axis.Horizontal

reverse8+

boolean

否

设置滑动条取值范围是否反向，横向Slider默认为从左往右滑动，竖向Slider默认为从上往下滑动。

默认值：false

SliderStyle枚举说明

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

名称

描述

OutSet

滑块在滑轨上。

InSet

滑块在滑轨内。

属性

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

名称

参数类型

描述

blockColor

ResourceColor

设置滑块的颜色。

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

trackColor

ResourceColor

设置滑轨的背景颜色。

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

selectedColor

ResourceColor

设置滑轨的已滑动部分颜色。

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

showSteps

boolean

设置当前是否显示步长刻度值。

默认值：false

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

showTips

boolean

设置滑动时是否显示百分比气泡提示。

默认值：false

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

说明：

当direction的属性值为Axis.Horizontal时，tip显示在滑块正上方。值为Axis.Vertical时，tip显示在滑块正左边。

tip的绘制区域为Slider自身节点的overlay。

Slider不设置边距，或者边距比较小时，tip会被截断。

trackThickness

Length

设置滑轨的粗细。

默认值：当参数style的值设置SliderStyle.OutSet 时为 4.0vp，SliderStyle.InSet时为20.0vp。

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

说明：

设置为小于0的值时，按默认值显示。

事件

通用事件仅支持挂载卸载事件：OnAppear，OnDisAppear。

名称

功能描述

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卡片中使用。

名称

值

描述

Begin

0

手势/鼠标接触或者按下滑块。

Moving

1

正在拖动滑块过程中。

End

2

手势/鼠标离开滑块。

Click

3

点击滑动条使滑块位置移动。

示例

// 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 = 40build() {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 = valueconsole.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 = valueconsole.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 = valueconsole.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 = valueconsole.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 = valueconsole.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 = valueconsole.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 = valueconsole.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 = valueconsole.info('value:' + value + 'mode:' + mode.toString())})}}.width('50%').height(300)}}.width('100%')}
}

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

书生 浦语大模型全链路开源体系

书生 浦语大模型全链路开源体系

通用大模型成为发展通用人工智能的重要途径 书生 浦语大模型的开源历程 书生 浦语 2.0体系，面向不同的使用需求，每个规格包含三个模型版本，（7B、20B）InternLM2-Base、InternLM2、InternLM2-Chat。 大模型是回归语言建…
阅读更多...
数据可视化-ECharts Html项目实战（9）

数据可视化-ECharts Html项目实战（9）

在之前的文章中，我们学习了如何在ECharts中编写气泡图，词云图。想了解的朋友可以查看这篇文章。同时，希望我的文章能帮助到你，如果觉得我的文章写的不错，请留下你宝贵的点赞，谢谢。 数据可视化-ECharts Ht…
阅读更多...
鸿蒙OS开发问题：【尺寸适配算法】

鸿蒙OS开发问题：【尺寸适配算法】

背景 如何在HarmonyOS 系统上出设计稿？ 问题1: 为什么要计算虚拟高度，即 virtualHeight static adaptDimension(value: number): number {let deviceDisplay: display.Display GlobalContext.getContext().getObject(display) as display.Display;le…
阅读更多...
PEReDi 完全隐私的央行数字货币方案

PEReDi 完全隐私的央行数字货币方案

第一个对完全隐私保护建模的方案，基于账户模型，要求交易双方都在线。 角色分类 中央银行 B B B：负责发行数字货币和货币政策，但不控制用户账户的状态，没有能力对交易的发送者或接收者进行去匿名化或披露与特定交易相…
阅读更多...
瑞吉外卖实战学习--11、分类管理的列表分页查询

瑞吉外卖实战学习--11、分类管理的列表分页查询

分类管理的列表分页查询 前言1、创建接口2、基于分页组件来实现的 前言 通过前端接口可以看到请求和传递的参数&#xff0c;本文章是基于mybatisPlus的分页插件来实现的 1、创建接口 GetMapping("/page")public R<Page> page(int page,int pageSize){ // …
阅读更多...
halcon图像腐蚀

halcon图像腐蚀

1、原理 使用结构元素在图像上移动&#xff0c;只有结构元素上的所有像素点都属于图像中时&#xff0c;才保留结构元素中心点所在的像素&#xff0c;常用于分离连接的两个物体、消除噪声。 2、halcon代码 dev_open_file_dialog (read_image, default, default, Selection) r…
阅读更多...
【Python刷题】将有序数组转换为二叉搜索树

【Python刷题】将有序数组转换为二叉搜索树

问题描述 给你一个整数数组 nums &#xff0c;其中元素已经按 升序 排列&#xff0c;请你将其转换为一棵 平衡 二叉搜索树。 高度平衡的意思是&#xff1a;二叉树是一颗满足“每个结点的左右两个子树的高度差的绝对值不超过1”的二叉树。 示例 1&#xff1a; 输入&#xf…
阅读更多...
Java学习33-Java 多线程Thread 多线程安全问题

Java学习33-Java 多线程Thread 多线程安全问题

Thread的生命周期 JDK1.5之前 JDK1.5之后分为 NEW RUNNABLE BLOCKED WAITING TIMED_WAITING TERMINATED 多线程安全问题 举例&#xff0c;要求三个窗口同时卖票&#xff0c;总共有100张票&#xff0c;打印出卖票过程&#xff0c;不允许重复售卖 package Thread;public class …
阅读更多...
Codeforces Round 930 (Div. 2) C. Bitwise Operation Wizard

Codeforces Round 930 (Div. 2) C. Bitwise Operation Wizard

题目 思路&#xff1a; #include <bits/stdc.h> using namespace std; #define int long long #define pb push_back #define fi first #define se second #define lson p << 1 #define rson p << 1 | 1 const int maxn 1e6 5, inf 1e9, maxm 4e4 5; co…
阅读更多...
linux：生产者消费者模型

linux：生产者消费者模型

个人主页 &#xff1a; 个人主页 个人专栏 &#xff1a; 《数据结构》 《C语言》《C》《Linux》 文章目录 前言一、生产者消费者模型二、基于阻塞队列的生产者消费者模型代码实现 总结 前言 本文是对于生产者消费者模型的知识总结 一、生产者消费者模型 生产者消费者模型就是…
阅读更多...
OpenHarmony实战开发-如何实现购物示例应用

OpenHarmony实战开发-如何实现购物示例应用

​介绍 本示例展示在进场时加载进场动画&#xff0c;整体使用Tabs容器设计应用框架&#xff0c;通过TabContent组件设置分页面&#xff0c;在子页面中绘制界面。通过Navigation完成页面之间的切换。在详情页中通过 Video组件加载视频资源&#xff0c;使用CustomDialogControll…
阅读更多...
Python 代码混淆工具概述

Python 代码混淆工具概述

在保护Python代码安全方面&#xff0c;有多种混淆工具可供选择&#xff0c;包括 Cython, Nuitka, Pyminifier 和 IPA guard。本文将介绍这些工具的特点和适用情况&#xff0c;以及在实际应用中的注意事项。 &#x1f4dd; 摘要 本文探讨了几种常见的 Python 代码混淆工具&am…
阅读更多...
用Typora+picgo+cloudflare+Telegraph-image的免费，无需服务器，无限空间的图床搭建（避坑指南）

用Typora+picgo+cloudflare+Telegraph-image的免费，无需服务器，无限空间的图床搭建（避坑指南）

用TyporapicgocloudflareTelegraph-image的免费&#xff0c;无需服务器&#xff0c;无限空间的图床搭建&#xff08;避坑指南&#xff09; 前提&#xff1a;有github何cloudflare (没有的话注册也很快) 首先&#xff0c;是一个别人写的详细的配置流程&#xff0c;傻瓜式教程&am…
阅读更多...
嵌入式网络硬件方案

嵌入式网络硬件方案

一. 简介 本文来了解一下嵌入式有些网络中&#xff0c;涉及的网络硬件方案。 注意&#xff1a;本文说明的是有些网络。 提起网络&#xff0c;我们一般想到的硬件就是“网卡”&#xff0c;“网卡”这个概念最早从电脑领域传出来&#xff0c;顾名思义就是能上网的卡。在电脑领…
阅读更多...
Android12 简单的共享内存驱动实现 参考Ashmem

Android12 简单的共享内存驱动实现 参考Ashmem

Android12 共享内存驱动实现 SOC&#xff1a;RK3568 system&#xff1a;Android12 概述&#xff1a; 1. 概述 Ashmem&#xff08;Anonymous Shared Memory&#xff0c;Android 匿名共享内存&#xff09;&#xff0c;它基于 mmap 系统调用&#xff0c;可以让不同进程将同一段…
阅读更多...
Go-知识协程

Go-知识协程

Go-知识协程 1. 基本概念1.1 进程1.2 线程1.3 协程 2. 协程的优势3. 调度模型3.1 线程模型3.2 Go调度器模型 4. 调度策略4.1 队列轮转4.2 系统调用4.3 工作量窃取4.4 抢占式调度 5. GOMAXPROCS对性能的影响 一个小活动&#xff1a; https://developer.aliyun.com//topic/lingma…
阅读更多...
virtualbox 日常运维

virtualbox 日常运维

前言 虽然平常以macOS和Linux作为主打工作环境&#xff0c;但还是有很多需要用到windows的时候&#xff0c;如camtasia和券商QMT软件。 在二手ThinkPad P53上安装了几个windows虚机&#xff0c;作为测试环境。Mac笔记本远程桌面连接嫌麻烦&#xff0c;还是命令行舒服。MacOS自…
阅读更多...
计算机网络—TCP协议详解：特性、应用（1）

计算机网络—TCP协议详解：特性、应用（1）

&#x1f3ac;慕斯主页&#xff1a;修仙—别有洞天 ♈️今日夜电波&#xff1a;マリンブルーの庭園—ずっと真夜中でいいのに。 0:34━━━━━━️&#x1f49f;──────── 3:34 &#x1f504; ◀️…
阅读更多...
Linux文件与进程交互的窥探者lsof

Linux文件与进程交互的窥探者lsof

lsof 是一个 Linux 和 UNIX 系统中的实用工具，用于列出系统中打开文件的所有信息。这个名字代表 “List Open Files”，但它也可以显示进程相关的其他信息，如： 打开的文件描述符列表 打开网络连接的列表 被进程使用的信号和内核对象等 在Linux系统中，有一个经典的概念： …
阅读更多...
【御控物联】JavaScript JSON结构转换（6）：对象To对象——综合应用

【御控物联】JavaScript JSON结构转换（6）：对象To对象——综合应用

文章目录 一、JSON结构转换是什么&#xff1f;二、术语解释三、案例之《JSON对象 To JSON对象》四、代码实现五、在线转换工具六、技术资料 一、JSON结构转换是什么&#xff1f; JSON结构转换指的是将一个JSON对象或JSON数组按照一定规则进行重组、筛选、映射或转换&#xff0…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023