【鸿蒙软件开发】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 = 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%')
  }
}

在这里插入图片描述

总结

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

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

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

相关文章

地球系统模式CESM

地球系统模式CESM

目前通用地球系统模式&#xff08;Community Earth System Model&#xff0c;CESM&#xff09;在研究地球的过去、现在和未来的气候状况中具有越来越普遍的应用。CESM由美国NCAR于2010年07月推出以来&#xff0c;一直受到气候学界的密切关注。近年升级的CESM2.0在大气、陆地、海…
阅读更多...
Linux高级命令（扩展）

Linux高级命令（扩展）

一、find命令 1、find命令作用 在Linux操作系统中&#xff0c;find命令主要用于进行文件的搜索。 2、基本语法 # find 搜索路径 [选项 选项的值] ... 选项说明&#xff1a; -name &#xff1a;根据文件的名称搜索文件&#xff0c;支持*通配符 -type &#xff1a;f代表普通文…
阅读更多...
基于小安派AiPi-Eye-S1的Nes游戏机

基于小安派AiPi-Eye-S1的Nes游戏机

1.作品展示 作品功能可见以下B站视频 外壳可以使用灰太狼大佬提供的外壳STL文件。在嘉立创三维猴上打印&#xff08;外壳12元快递6元&#xff09;。 外壳从以下的帖子中获取&#xff1a; 模型分享 2.作品说明 2.1 硬件部分 硬件上使用到了AiPi-Eye-S1开发板以及3.5寸 240*3…
阅读更多...
ElasticSearch快速入门实战

ElasticSearch快速入门实战

全文检索 什么是全文检索 全文检索是一种通过对文本内容进行全面索引和搜索的技术。它可以快速地在大量文本数据中查找包含特定关键词或短语的文档&#xff0c;并返回相关的搜索结果。全文检索广泛应用于各种信息管理系统和应用中&#xff0c;如搜索引擎、文档管理系统、电子…
阅读更多...
安防监控项目---CGI接口的移植和使用

安防监控项目---CGI接口的移植和使用

文章目录 前言一、CGI二、CGI的具体移植步骤2.1 cgi源码下载2.2 搭建交叉编译环境2.3 注意事项 三、测试结果总结 前言 书接上期&#xff0c;上期与大家分享的是boa服务器的移植&#xff0c;那么几天要和大家介绍的呢是一款接口&#xff0c;哈哈哈&#xff0c;用起来也是有点难…
阅读更多...
NSS刷题 js前端修改 os.path.join漏洞

NSS刷题 js前端修改 os.path.join漏洞

打算刷一遍nssweb题&#xff08;任重道远&#xff09; 前面很简单 都是签到题 这里主要记录一下没想到的题目 [GDOUCTF 2023]hate eat snake 这里 是对js的处理 有弹窗 说明可能存在 alert 我们去看看js 这里进行了判断 如果 getScore>-0x1e9* 我们结合上面 我觉得是6…
阅读更多...
人工智能基础_机器学习008_使用正规方程_损失函数进行计算_一元一次和二元一次方程演示_sklearn线性回归演示---人工智能工作笔记0048

人工智能基础_机器学习008_使用正规方程_损失函数进行计算_一元一次和二元一次方程演示_sklearn线性回归演示---人工智能工作笔记0048

自然界很多都是正态分布的,身高,年龄,体重...但是财富不是. 然后我们来看一下这个y = wx+b 线性回归方程. 然后我们用上面的代码演示. 可以看到首先import numpy as np 导入numby 数据计算库 import matplotlib.pyplot as plt 然后导入图形画的库 然后: X = np.linspace(0,…
阅读更多...
文件正在使用，操作无法完成。windows查看占用文件的程序

文件正在使用，操作无法完成。windows查看占用文件的程序

查看占用 tasklist /m IDMShellExt64.dll 映像名称 PID 模块explorer.exe 7452 IDMShellExt64.dll杀死进程 taskkill /f /PID 7452 成功: 已终止 PID 为 7452 的进程。重启explorer explorer
阅读更多...
20.3 OpenSSL 对称AES加解密算法

20.3 OpenSSL 对称AES加解密算法

AES算法是一种对称加密算法&#xff0c;全称为高级加密标准&#xff08;Advanced Encryption Standard&#xff09;。它是一种分组密码&#xff0c;以128比特为一个分组进行加密&#xff0c;其密钥长度可以是128比特、192比特或256比特&#xff0c;因此可以提供不同等级的安全性…
阅读更多...
OpenCV—自动驾驶实时道路车道检测（完整代码)

OpenCV—自动驾驶实时道路车道检测（完整代码)

自动驾驶汽车是人工智能领域最具颠覆性的创新之一。在深度学习算法的推动下，它们不断推动我们的社会向前发展，并在移动领域创造新的机遇。自动驾驶汽车可以去传统汽车可以去的任何地方，并且可以完成经验丰富的人类驾驶员所做的一切。但正确地训练它是非常重要的。自动驾驶汽…
阅读更多...
计算机考研 | 2013年 | 计算机组成原理真题

计算机考研 | 2013年 | 计算机组成原理真题

文章目录 【计算机组成原理2013年真题43题-9分】【第一步&#xff1a;信息提取】【第二步&#xff1a;具体解答】 【计算机组成原理2013年真题44题-14分】【第一步&#xff1a;信息提取】【第二步&#xff1a;具体解答】 【计算机组成原理2013年真题43题-9分】 某32位计算机&a…
阅读更多...
sql-50练习题6-10

sql-50练习题6-10

sql练习题6-10题 前言数据库表结构介绍学生表课程表成绩表教师表 0-6 查询"李"姓老师的数量0-7 查询学过"李四"老师授课的同学的信息0-8 查询没学过"李四"老师授课的同学的信息0-9 查询学过编号为"01"并且也学过编号为"02"的…
阅读更多...
SMART PLC梯形速度曲线轨迹规划(追剪从轴控制)

SMART PLC梯形速度曲线轨迹规划(追剪从轴控制)

在介绍本专栏之前，大家可以参考另一篇博图PLC的梯形加减速点动功能块介绍文章 梯形加减速点动功能块(博途SCL)_RXXW_Dor的博客-CSDN博客文章浏览阅读184次。SMART PLC斜坡函数SMART PLC斜坡函数功能块（梯形图代码）_RXXW_Dor的博客-CSDN博客斜坡函数Ramp的具体应用可以参看下…
阅读更多...
港联证券：注册制意味着什么？

港联证券：注册制意味着什么？

跟着我国本钱商场变革的不断深化&#xff0c;注册制在近年来成为了备受关注的论题。注册制的施即将改动原有的核准原则&#xff0c;关于股票和债券的发行&#xff0c;将由事后监管转变为事前挂号审理。那么&#xff0c;注册制意味着什么呢&#xff1f;本文将从经济、商场和出资…
阅读更多...
[云原生案例1.] 构建LNMP架构并运行Wordpress个人博客平台

[云原生案例1.] 构建LNMP架构并运行Wordpress个人博客平台

文章目录 1. 当前需求2. 前置准备3. 搭建过程3.1 创建自定义网络3.2 部署并配置nginx3.2.1 创建工作目录并上传相关软件包3.2.2 解压缩相关软件包3.2.3 编写Dockerfile文件3.2.4 编写nginx.conf文件3.2.5 创建nginx镜像3.2.6 运行容器 3.3 部署并配置mysql3.3.1 创建工作目录3.…
阅读更多...
一文搞懂Linux线程和进程区别？

一文搞懂Linux线程和进程区别？

1.什么是线程&#xff1f; 线程其实就是轻量级进程&#xff08;LWP&#xff09;。 轻量级进程&#xff08;Light Weight Process&#xff09;是指在操作系统级别上&#xff0c;将一个进程划分为多个执行单元&#xff0c;每个执行单元拥有自己的堆栈、程序计数器和资源使用情况…
阅读更多...
深入探讨Docker生态系统，Docker Compose vs. Docker Swarm vs. Kubernetes：深入比较

深入探讨Docker生态系统，Docker Compose vs. Docker Swarm vs. Kubernetes：深入比较

文章目录 Docker ComposeDocker SwarmKubernetesDocker Compose适用场景 Docker Swarm适用场景 Kubernetes适用场景 对比和结论 &#x1f388;个人主页&#xff1a;程序员 小侯 &#x1f390;CSDN新晋作者 &#x1f389;欢迎 &#x1f44d;点赞✍评论⭐收藏 ✨收录专栏&#xf…
阅读更多...
Linux(Centos7)防火墙端口操作记录

Linux(Centos7)防火墙端口操作记录

1、nginx -t #Nginx配置文件检查 上述截图代表检查没问题 上述截图检查配置文件配置错误&#xff0c;并提示错误文件位置 2、systemctl restart nginx #重启Nginx 重启Nginx失败 3、systemctl status nginx.service #查看Nginx服务状态 80端口被占导致服务启动失败 4、n…
阅读更多...
【Python 零基础入门】常用内置函数 再探

【Python 零基础入门】常用内置函数 再探

【Python 零基础入门】内容补充 1 常用内置函数 Python 简介为什么要学习内置函数集合操作len(): 计算长度sorted(): 排序all(): 检查所有元素any(): 检查任一元素filter(): 过滤元素map(): 应用函数zip(): 组合元素 文件操作和输入输出open(): 打开文件read(): 读取文件write(…
阅读更多...
微前端qiankun接入Vue和React项目

微前端qiankun接入Vue和React项目

主应用&#xff1a;Vue3Webpack 1、创建主应用&#xff1a; npx vue create main-vue3-app 2、安装qiankun npx yarn add qiankun 3、项目中使用的vue、vue-router、qiankun依赖如下&#xff0c;webpack版本为5.x 4、在根目录下创建vue.config.js const { defineConfig }…
阅读更多...
最新文章

Copyright @ 2022~2023