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

news2024/11/16 12:46:02

文章目录

  • 前言
  • 一、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组件：滑动条组件，通常用于快速调节设置值，如音量调节、亮度调节等应用场景。

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

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

相关文章

【Java基础】JDK8-17新特性

【Java基础】JDK8-17新特性

JDK8-17新特性 文章目录 JDK8-17新特性1. 如何学习新特性2. Java8新特性&#xff1a;Lambda表达式3. Java8新特性&#xff1a;函数式(Functional)接口3.1 什么是函数式接口3.2 如何理解函数式接口3.3 举例3.4 Java 内置函数式接口3.4.1 之前的函数式接口3.4.2 四大核心函数式接…
阅读更多...
Vue3.3指北(三)

Vue3.3指北(三)

Vue3.3指北 1、Vue2和Vue31.1、 Vue2 选项式 API vs Vue3 组合式API1.2、Vue3的优势 2、组合式API - setup2.1、setup选项2.2、setup中写代码的特点2.3、<script setup>语法糖2.4、props和context 3、组合式API - reactive和ref函数3.1、reactive3.2、ref3.3、reactive 对…
阅读更多...
2023年中国背光显示面板分类、市场规模及企业分析[图]

2023年中国背光显示面板分类、市场规模及企业分析[图]

背光显示面板行业&#xff0c;指生产背光显示面板及其相关配件的制造商和供应商&#xff0c;这些制造商和供应商主要为电视机、电脑显示器、智能手机等电子产品提供背光显示面板及配件。背光显示面板是一种电子器件&#xff0c;其功能主要是将电信号转化为视觉图像&#xff0c;…
阅读更多...
2023年中国调音台产业链、产量及市场规模分析[图]

2023年中国调音台产业链、产量及市场规模分析[图]

调音台是一种专业音频设备&#xff0c;用于混音、处理和控制音频信号。它通常用于音乐制作、现场演出、录音室以及广播等场景中。调音台允许用户调整不同声音来源的音频信号&#xff0c;使其在混音过程中达到理想的音质和平衡。调音台按信号出来方式可分为&#xff1a;模拟式调…
阅读更多...
业务设计——注册用户如何防止缓存穿透

业务设计——注册用户如何防止缓存穿透

什么是缓存穿透 缓存穿透是指在使用缓存系统时&#xff0c;恶意或频繁地请求一个不存在于缓存中的数据&#xff0c;导致每次请求都需要查询数据库或其他数据存储系统&#xff0c;从而绕过了缓存的效果&#xff0c;严重影响系统性能。 这种情况通常发生在恶意攻击、大量请求缓存…
阅读更多...
高可用集群 keepalived

高可用集群 keepalived

一、高可用集群&#xff1a; 1、简介&#xff1a; 高可用集群&#xff08;High Availability Cluster&#xff0c;简称 HA Cluster&#xff09;&#xff0c;是一组相互连接的计算机或服务器&#xff0c;它通过保护用户的业务程序对外不间断提供的服务&#xff0c;把因软件、硬…
阅读更多...
PHP如何批量修改二维数组中值

PHP如何批量修改二维数组中值

每个name值加pex&#xff0c;age加5&#xff0c; 原数据&#xff1a; $data[["name">a,age>12],["name">b,age>22],["name">c,age>33],["name">d,age>44], ];实现效果 方案一、foreach引用方式 $data[["…
阅读更多...
7 款好用的 PDF 密码删除工具

7 款好用的 PDF 密码删除工具

这是最佳 PDF 密码删除工具列表。该列表包括免费和付费软件。将要在线完成的所有事情都需要密码才能感到安全。数据传输也是如此。大多数数据是通过文件传输的&#xff0c;PDF有自己的标志。PDF是一种灵活的文件格式&#xff0c;因此也可以专业使用。 有多种PDF 编辑器软件&am…
阅读更多...
echart 设置 legend.type=“scroll“ 翻页时，中文上面被截取，显示不完整，解决办法

echart 设置 legend.type=“scroll“ 翻页时，中文上面被截取，显示不完整，解决办法

问题如图&#xff1a; 修复后的样子&#xff1a; 设置 legend 的 padding height 和 grid 都没有效果&#xff0c;最终找到办法&#xff1a; legend: {itemHeight: 10, // 截取原因是这里设置的太小textStyle: {fontSize: 20,// 行高设置会改变文本区域的高度&#xff0c;不…
阅读更多...
SpringMVC Day 04 ： 数据绑定

SpringMVC Day 04 ： 数据绑定

前言 SpringMVC是一个非常流行的Java Web框架&#xff0c;它提供了很多方便的功能和工具来帮助我们构建高效、灵活的Web应用程序。其中&#xff0c;数据绑定就是SpringMVC中非常重要的一部分&#xff0c;它可以帮助我们方便地将请求参数绑定到Java对象上&#xff0c;从而简化了…
阅读更多...
北美干旱监测 (NADM)数据集

北美干旱监测 (NADM)数据集

北美干旱监测 (NADM) 栅格数据集由国家环境信息中心 (NCEI) 和国家海洋和大气管理局 (NOAA) 国家综合干旱信息系统 (NIDIS) 生成。该数据集是加拿大、墨西哥和美国作者制作的北美干旱监测 (NADM) 的网格版本&#xff0c;其中对于每个 2.5 公里网格单元&#xff0c;该值由该地区…
阅读更多...
hdlbits系列verilog解答（32位加法器）-25

hdlbits系列verilog解答（32位加法器）-25

文章目录 一、问题描述二、verilog源码三、仿真结果 一、问题描述 您将获得一个执行 16 位加法的模块 add16 。实例化其中两个以创建一个 32 位加法器。一个 add16 模块在接收到第一个加法器的进位结果后&#xff0c;计算加法结果的低 16 位&#xff0c;而第二个 add16 模块计…
阅读更多...
大厂面试题-什么是JVM

大厂面试题-什么是JVM

JVM全称是Java虚拟机&#xff0c;在聊什么是JVM之前&#xff0c;我们不妨看⼀下这张图。 从这张图中可以看出JVM所处的位置&#xff0c;同时也能看出它两个作用&#xff1a; 1、运⾏并管理Java源码⽂件所⽣成的Class⽂件&#xff0c; 2、在不同的操作系统上安装不同的JVM&#…
阅读更多...
搭建微信小程序环境及项目结构介绍

搭建微信小程序环境及项目结构介绍

一、注册 访问微信公众平台&#xff0c;将鼠标的光标置于账号分类中的小程序上&#xff0c; 点击‘查看详情’ 点击“前往注册” 下方也可以点击注册&#xff1a; 小程序注册页面&#xff1a; 步骤a:进入小程序注册页&#xff0c;根据指引填写信息和提交相应的资料&#x…
阅读更多...
VR步进式漫游，轻松构建三维模型，带来展示新形式！

VR步进式漫游，轻松构建三维模型，带来展示新形式！

引言&#xff1a; 虚拟现实&#xff08;Virtual Reality&#xff0c;简称VR&#xff09;已经成为当今科技领域的一项创新力量&#xff0c;它正在逐渐渗透到不同的领域&#xff0c;其中步进式漫游是VR技术的一项重要应用&#xff0c;它能在各个行业的宣传中发挥重要作用。 一&a…
阅读更多...
20.1 OpenSSL 字符BASE64压缩算法

20.1 OpenSSL 字符BASE64压缩算法

OpenSSL 是一种开源的加密库&#xff0c;提供了一组用于加密和解密数据、验证数字证书以及实现各种安全协议的函数和工具。它可以用于创建和管理公钥和私钥、数字证书和其他安全凭据&#xff0c;还支持SSL/TLS、SSH、S/MIME、PKCS等常见的加密协议和标准。 OpenSSL 的功能非常…
阅读更多...
驱动作业10.28

驱动作业10.28

驱动程序 #include <linux/init.h> #include <linux/module.h> #include<linux/of.h> #include<linux/of_gpio.h> #include<linux/gpio.h> #include<linux/timer.h> #include <linux/fs.h> #include <linux/io.h> #include &…
阅读更多...
SpringCloud复习：（7）@EnableZuulProxy注解的作用

SpringCloud复习：（7）@EnableZuulProxy注解的作用

使用zuul时&#xff0c;需要加EnableZuulProxy注解&#xff0c;这个注解定义如下&#xff1a; 可以看到&#xff0c;它引入了一个配置类ZuulProxyMarkerConfiguration,这个类代码如下&#xff1a; 其中定义了一个类型为ZuulProxyMarkerConfiguration.Marker类型的bean. 这个…
阅读更多...
QPushButton样式设置

QPushButton样式设置

QPushButton样式设置 Chapter1 QPushButton样式设置无样式的按钮改变字体颜色改变字体改变字号改变背景颜色设置上边框为2个像素&#xff0c;样式为实线&#xff0c;颜色为黑色设置所有边框为2个像素&#xff0c;样式为实线&#xff0c;颜色为黑色设置左上角圆角为&#xff1a;…
阅读更多...
使用一个Series序列减去另一个Series序列Series.subtract()

使用一个Series序列减去另一个Series序列Series.subtract()

【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 求两个序列中对应位置 的各元素的差 a.subtract(b) [太阳]选择题 关于以下代码的说法中正确的是? import pandas as pd a pd.Series([1,2,3]) print("【显示】a:\n",a) b pd.Seri…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023