【鸿蒙软件开发】ArkTS基础组件之Select(下拉菜单)、Slider(滑动条)

文章目录

  • 前言
  • 一、Select下拉菜单
    • 1.1 子组件
    • 1.2 接口
      • 参数
    • 1.3 属性
    • 1.4 事件
    • 1.5 示例代码
  • 二、Slider
    • 2.1 子组件
    • 2.2 接口
      • 参数:
      • SliderStyle枚举说明
    • 2.3 属性
    • 2.4 事件
      • SliderChangeMode枚举说明
    • 2.5 示例代码
  • 总结


前言

Select组件:提供下拉选择菜单,可以让用户在多个选项之间选择。
Slider组件:滑动条组件,通常用于快速调节设置值,如音量调节、亮度调节等应用场景。


一、Select下拉菜单

提供下拉选择菜单,可以让用户在多个选项之间选择。

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

1.1 子组件

1.2 接口

Select(options: Array<SelectOption>)

在这里插入图片描述

参数为SelectOption的数组

参数

SelectOption对象说明
参数:value,参数类型:ResourceStr,是否必填:是
功能描述:下拉选项内容。
参数:icon,参数类型:ResourceStr,是否必填:否
功能描述:下拉选项图片。

1.3 属性

除支持通用属性外,还支持以下属性:
属性名称:selected,属性类型:number,属性描述:设置下拉菜单初始选项的索引,第一项的索引为0。
当不设置selected属性时,默认选择值为-1,菜单项不选中。

属性名称:value,属性类型:string,属性描述:设置下拉按钮本身的文本内容。 当菜单选中时默认会替换为菜单项文本内容。

如下所示:

// xxx.ets
@Entry
@Component
struct SelectExample {build() {Column() {Select([{ value: 'aaa', icon: "/common/public_icon.svg" },{ value: 'bbb', icon: "/common/public_icon.svg" },{ value: 'ccc', icon: "/common/public_icon.svg" },{ value: 'ddd', icon: "/common/public_icon.svg" }]).selected(2).value('TTTTT').font({ size: 16, weight: 500 }).fontColor('#182431').selectedOptionFont({ size: 16, weight: 400 }).optionFont({ size: 16, weight: 400 }).onSelect((index: number) => {console.info('Select:' + index)})}.width('100%')}
}

在这里插入图片描述

在上面的代码中,value为’TTTTT’值,
手机显示如下:

  • 未选择时
    在这里插入图片描述

  • 选择后
    在这里插入图片描述

属性名称:font,属性类型:Font,属性描述:设置下拉按钮本身的文本样式。

默认值:

{
size: '16fp',
weight: FontWeight.Medium
}

属性名称:fontColor,属性类型:ResourceColor,属性描述:设置下拉按钮本身的文本颜色。
默认值:‘#E6FFFFFF’

属性名称:selectedOptionBgColor,属性类型:ResourceColor,属性描述:设置下拉菜单选中项的背景色。
默认值:‘#33007DFF’

属性名称:selectedOptionFont,属性类型:Font,属性描述:设置下拉菜单选中项的文本样式。
默认值:

{
size: '16fp',
weight: FontWeight.Regular
}

属性名称:selectedOptionFontColor,属性类型:ResourceColor,属性描述:设置下拉菜单选中项的文本颜色。
默认值:‘#ff007dff’

属性名称:optionBgColor,属性类型:ResourceColor,属性描述:设置下拉菜单项的背景色。
默认值:‘#ffffffff’

属性名称:optionFont,属性类型:Font,属性描述:设置下拉菜单项的文本样式。
默认值:

{
size: '16fp',
weight: FontWeight.Regular
}

属性名称:optionFontColor,属性类型:ResourceColor,属性描述:设置下拉菜单项的文本颜色。
默认值:‘#ff182431’

1.4 事件

onSelect(callback: (index: number, value?: string) => void)

在这里插入图片描述

下拉菜单选中某一项的回调。
index:选中项的索引。
value:选中项的值。

1.5 示例代码

// xxx.ets
@Entry
@Component
struct SelectExample {build() {Column() {Select([{ value: 'aaa', icon: "/common/public_icon.svg" },{ value: 'bbb', icon: "/common/public_icon.svg" },{ value: 'ccc', icon: "/common/public_icon.svg" },{ value: 'ddd', icon: "/common/public_icon.svg" }]).selected(2).value('TTTTT').font({ size: 16, weight: 500 }).fontColor('#182431').selectedOptionFont({ size: 16, weight: 400 }).optionFont({ size: 16, weight: 400 }).onSelect((index: number) => {console.info('Select:' + index)})}.width('100%')}
}

在这里插入图片描述

二、Slider

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

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

2.1 子组件

2.2 接口

创建Slider的函数原型如下:

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的值,取决于离哪个更近。

step
类型: number
描述: 设置Slider滑动步长。默认值为1。
取值范围: [0.01, max]
说明: 当设置小于0或百分比的值时,将按默认值显示。

style
类型: SliderStyle
描述: 设置Slider的滑块与滑轨显示样式。默认值为SliderStyle.OutSet。

direction
类型: Axis
描述: 设置滑动条滑动方向为水平或竖直方向。默认值为Axis.Horizontal。

reverse
类型: boolean
描述: 设置滑动条取值范围是否反向。横向Slider默认为从左往右滑动,竖向Slider默认为从上往下滑动。默认值为false。

SliderStyle枚举说明

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

SliderStyle.OutSet
滑块在滑轨上。

SliderStyle.InSet
滑块在滑轨内。

2.3 属性

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

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。
说明: 当direction的属性值为Axis.Horizontal时,tip显示在滑块正上方。当direction的属性值为Axis.Vertical时,tip显示在滑块正左边。tip的绘制区域为Slider自身节点的overlay。如果Slider没有设置边距,或者边距较小,tip可能会被截断。

trackThickness
类型: Length
描述: 设置滑轨的粗细。
默认值: 当参数style的值设置为SliderStyle.OutSet时为4.0vp,当style的值设置为SliderStyle.InSet时为20.0vp。
说明: 如果设置为小于0的值时,将按默认值显示。从API version 9开始,该接口支持在ArkTS卡片中使用。

2.4 事件

注意:通用事件仅支持挂载卸载事件: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
描述: 点击滑动条使滑块位置移动。

2.5 示例代码

// 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%')}
}

在这里插入图片描述


总结

Select组件:提供下拉选择菜单,可以让用户在多个选项之间选择。
Slider组件:滑动条组件,通常用于快速调节设置值,如音量调节、亮度调节等应用场景。

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

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

相关文章

如何使用IP归属地查询API加强网络安全

引言 在当今数字化时代&#xff0c;网络安全对于个人和组织来说至关重要。恶意网络活动的威胁不断增加&#xff0c;因此采取有效的措施来加强网络安全至关重要。其中之一是利用IP归属地查询API。这个工具可以为您的网络安全策略提供宝贵的信息&#xff0c;帮助您更好地保护自己…

STM32H750之FreeRTOS学习--------(一)初识RTOS

FreeRTOS 一、初识RTOS 裸机&#xff1a;裸机又称为前后台系统&#xff0c;前台系统指的中断服务函数&#xff0c;后台系统指的大循环&#xff0c;即应用程序 实时性差,程序轮流执行delayCPU空等待&#xff0c;效率低程序混乱&#xff0c;臃肿&#xff0c;功能都放在while循环…

手机apn介绍

公司遇到一件很棘手的事情&#xff0c;app发版之后&#xff0c;长江以北地方的用户网络信号很好&#xff0c;但是打开app之后网络连接不上&#xff0c;而长江以南的用户网络却很好。大家找了很多资料&#xff0c;提出一些方案&#xff1a; 1、是不是运营商把我们公司的ip给限制…

UE4 HLSL学习笔记

在Custom配置对应ush文件路径 在HLSL中写入对应代码 Custom里面增加两个Input&#xff0c;名字必须和ush文件内的未知变量名字一样 然后就对应输出对应效果的颜色 这就是简单的加法运算 减法同理&#xff1a; 乘法除法同理 HLSL取最小值 HLSL取最大值 绝对值&#xff1a; 取余…

QVD-2023-19300:致远M1 usertokenservice反序列化RCE漏洞复现

文章目录 致远M1 usertokenservice反序列化RCE漏洞(QVD-2023-19300)复现0x01 前言0x02 漏洞描述0x03 影响版本0x04 漏洞环境0x05 漏洞复现1.访问漏洞环境2.构造POC3.复现 0x06 修复建议 致远M1 usertokenservice反序列化RCE漏洞(QVD-2023-19300)复现 0x01 前言 免责声明&…

【机器学习合集】模型设计之卷积核设计 ->(个人学习记录笔记)

文章目录 卷积核设计1. 基于参数压缩的卷积设计1.1 【11卷积】1.2 【11卷积典型应用】1.3 【小卷积的使用】 2. 基于感受野的卷积设计2.1 膨胀卷积(带孔卷积&#xff0c;strous convolution)2.2 可变形卷积2.3 非局部卷积 3. 基于卷积操作的优化3.1 移位网络3.2 加法网络 卷积核…

场景交易额超40亿,海尔智家三翼鸟开始收获

文 | 螳螂观察 作者 | 余一 随着双十一的到来&#xff0c;国内的消费情绪再次被点燃。在这类大促之下&#xff0c;品牌们就像一个个天体&#xff0c;不断引动着市场潮汐&#xff0c;期待自己能触发更大的“海潮效应”。 所谓“海潮效应”是指&#xff0c;海水因天体的引力而…

YOLOv8如何添加注意力模块?

分为两种&#xff1a;有参注意力和无参注意力。 eg: 有参&#xff1a; import torch from torch import nnclass EMA(nn.Module):def __init__(self, channels, factor8):super(EMA, self).__init__()self.groups factorassert channels // self.groups > 0self.softmax …

RPA除了和OCR、NLP技术结合,还能和什么技术结合?

鉴于业内现在也经常把RPA称为数字员工&#xff0c;就虚拟一个人的形象来解答吧。 首先是头部&#xff0c;实现人的“听看说想”能力&#xff1a; 听&#xff1a;ASR&#xff08;语音识别技术&#xff09;&#xff0c;主要用于听取和理解语音输入&#xff0c;让RPA能处理语音数…

教你用BeautifulSoup实现数据解析,并爬取豆瓣TOP250电影榜

5分钟使用Python爬取豆瓣TOP250电影榜 本视频的演示步骤&#xff1a; 使用requests爬取网页使用BeautifulSoup实现数据解析借助pandas将数据写出到Excel 这三个库的详细用法&#xff0c;请看我的其他视频课程 import requests from bs4 import BeautifulSoup import pandas…

ISO/IEC 25010 软件质量模型

ISO/IEC 软件质量模型&#xff08;ISO/IEC 25010&#xff09;是一种用于评估和描述软件质量特性的国际标准。该标准定义了 8 种主要的软件质量特性。 使用 ISO/IEC 软件质量模型可以帮助开发人员和测试人员更好地理解和评估软件质量&#xff0c;从而提高软件质量和用户满意度。…

JAVA发票管理的收货单订单创建发票详情介绍

本人详解 作者&#xff1a;王文峰&#xff0c;参加过 CSDN 2020年度博客之星&#xff0c;《Java王大师王天师》作者 公众号&#xff1a;山峯草堂&#xff0c;非技术多篇文章&#xff0c;专注于天道酬勤的 Java 开发问题、中国国学、传统文化和代码爱好者的程序人生&#xff0c;…

转化率的催化剂:网站客服机器人如何推动企业销售?

随着5G的推广&#xff0c;人工智能技术的普及程度越来越高&#xff0c;人机交互已经成为这个时代的常态&#xff0c;无论是在我们的日常生活中还是在企业服务中都非常常见。如今&#xff0c;无论是营销型企业还是客服型企业&#xff0c;都纷纷采用网站客服机器人服务&#xff0…

scrapy-redis分布式爬虫(分布式爬虫简述+分布式爬虫实战)

一、分布式爬虫简述 &#xff08;一&#xff09;分布式爬虫优势 1.充分利用多台机器的带宽速度 2.充分利用多台机器的ip地址 &#xff08;二&#xff09;Redis数据库 1.Redis是一个高性能的nosql数据库 2.Redis的所有操作都是原子性的 3.Redis的数据类型都是基于基本数据…

Python数据挖掘:入门、进阶与实用案例分析——基于非侵入式负荷检测与分解的电力数据挖掘

文章目录 摘要01 案例背景02 分析目标03 分析过程04 数据准备05 属性构造06 模型训练07 性能度量08 推荐阅读赠书活动 摘要 本案例将根据已收集到的电力数据&#xff0c;深度挖掘各电力设备的电流、电压和功率等情况&#xff0c;分析各电力设备的实际用电量&#xff0c;进而为电…

MATLAB——一维小波的多层分解

%% 学习目标&#xff1a;一维小波的多层分解 clear all; close all; load noissin.mat; xnoissin; [C,L]wavedec(x,3,db4); % 3层分解&#xff0c;使用db4小波 [cd1,cd2,cd3]detcoef(C,L,[1,2,3]); % 使用detcoef函数获取细节系数 ca3appcoef(C,L,db4,3); …

基于AliO Things和阿里云的智能环境监控系统。

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、实习内容二、实习方法2.1搭建开发环境并完成编译2.1.1 正常完成编译的标志2.1.2 编写实例烧录程序&#xff0c;并完成烧录 2.2按键实现流水灯2.2.1 HaaS ED…

1400*C. Team(模拟构造)

Problem - 401C - Codeforces 解析&#xff1a; 因为0不能相邻&#xff0c;所以0之间最少 n-1 个位置&#xff0c;最多 n1 个位置&#xff0c;如果 m<n-1显然不符题意。 并且1最多连续两个&#xff0c;所以 m>2*n2 同样不符题意。 其余情况构造即可 #include<bits/st…

python manage.py createsuperuser运行错误

我做思念作笺&#xff0c;随风而去&#xff0c;落在你常路过的那个街角… 错误复现 PS D:\教学文件\Django\djangoProject\webDemo02> python manage.py createsuperuser System check identified some issues:WARNINGS: ?: (urls.W005) URL namespace admin isnt unique…

MWeb Pro for Mac:博客生成编辑器,助力你的创作之旅

在当今数字化时代&#xff0c;博客已经成为了许多人记录生活、分享知识和表达观点的重要渠道。而要打造一个专业、美观且易于管理的博客&#xff0c;选择一款强大的博客生成编辑器至关重要。今天&#xff0c;我向大家推荐一款备受好评的Mac软件——MWeb Pro。 MWeb Pro是一款专…