AI 助理
备案控制台
开发者社区 大数据 文章 正文

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

2024-01-03 2102
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 【鸿蒙软件开发】ArkTS基础组件之Select(下拉菜单)、Slider(滑动条)

前言


Select组件：提供下拉选择菜单，可以让用户在多个选项之间选择。

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

一、Select下拉菜单


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

说明

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


1.1 子组件

无


1.2 接口

Select(options: Array<SelectOption>)


9b8a68a0339041afbebb757aa68b89cc.png

参数为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%')
  }
}


11e254e5c6da41188ef125275051d4c5.png

在上面的代码中，value为’TTTTT’值，

手机显示如下：

  • 未选择时

c0611dd57553490f892e89579fa712cc.png

选择后

7459debc960242dc84d28715b3b7785b.png

属性名称：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)


a4699c9c796b49e58ebe8fe48ebf629a.png

下拉菜单选中某一项的回调。

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


058d5400674f49a0888e11060ab801e7.png


二、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})


48ea1eea0bec4aec9631e052c4b5e001.png


从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)


ddbe0bea6a214d208f822ab6f5c6f4c8.png

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


d9f97fa1aaa042fa9dcfbc3f9ad5afa4.png

总结

Select组件：提供下拉选择菜单，可以让用户在多个选项之间选择。

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

文章标签：
API
索引
数据处理
关键词：
HarmonyOS组件
HarmonyOS arkts
HarmonyOS滑动
HarmonyOS arkts组件
HarmonyOS软件开发
人才程序员
目录
相关文章
余生吟清歌
|
3天前
|
安全 数据安全/隐私保护 UED
HarmonyOS 5.0 （Next）应用开发实战：使用ArkTS构建开箱即用的登录页面【HarmonyOS 5.0（Next）】
### HarmonyOS 5.0（Next）应用开发实战：使用ArkTS构建开箱即用的登录页面 HarmonyOS 5.0（Next）融合了美学与科技，引入“光感美学”设计理念和多设备深度协同功能。本文通过 ArkTS 构建一个简单的登录页面，展示了模块化导入、状态管理、方法封装、声明式UI构建及事件处理等最佳实践。代码实现了一个包含用户名和密码输入框及登录按钮的界面，支持错误提示和页面跳转。
余生吟清歌
39 14
HarmonyOS 5.0 （Next）应用开发实战：使用ArkTS构建开箱即用的登录页面【HarmonyOS 5.0（Next）】
余生吟清歌
|
3天前
|
人工智能 自然语言处理 算法
开箱即用的个人主页页面开发实战—基于HarmonyOS 5.0 （Next）和ArkTS的实现【HarmonyOS 5.0（Next）】
本文介绍了基于HarmonyOS 5.0（Next）和ArkTS开发的开箱即用个人主页页面。HarmonyOS 5.0（Next）采用全新“和谐美学”设计理念，通过光元素模拟、多设备无缝流转及小艺助手升级，提升用户体验。文章详细解析了使用ArkTS构建个人主页页面的代码，展示了清晰的布局层次、简洁的事件处理、状态管理和组件化开发等最佳实践。这段代码不仅实现了美观的界面设计，还提供了高效的应用导航和数据传递功能，体现了对用户体验的高度关注。
余生吟清歌
40 12
开箱即用的个人主页页面开发实战—基于HarmonyOS 5.0 （Next）和ArkTS的实现【HarmonyOS 5.0（Next）】
余生吟清歌
|
3天前
|
自然语言处理 搜索推荐 数据安全/隐私保护
鸿蒙登录页面好看的样式设计-HarmonyOS应用开发实战与ArkTS代码解析【HarmonyOS 5.0（Next）】
鸿蒙登录页面设计展示了 HarmonyOS 5.0（Next）的未来美学理念，结合科技与艺术，为用户带来视觉盛宴。该页面使用 ArkTS 开发，支持个性化定制和无缝智能设备连接。代码解析涵盖了声明式 UI、状态管理、事件处理及路由导航等关键概念，帮助开发者快速上手 HarmonyOS 应用开发。通过这段代码，开发者可以了解如何构建交互式界面并实现跨设备协同工作，推动智能生态的发展。
余生吟清歌
37 10
鸿蒙登录页面好看的样式设计-HarmonyOS应用开发实战与ArkTS代码解析【HarmonyOS 5.0（Next）】
猫林老师
|
2天前
|
JavaScript Java 容器
鸿蒙应用开发从入门到入行 - 篇4:层叠布局、自定义组件、ForEach
导读：在本篇文章里，您将掌握层叠布局、自定义组件的用法，特别是自定义组件将来的开发中必然会用，其中应该特别关注自定义组件的一些规范与装饰器。
猫林老师
25 7
鸿蒙应用开发从入门到入行 - 篇4:层叠布局、自定义组件、ForEach
二流小码农
|
1天前
鸿蒙开发：一个轻盈的上拉下拉刷新组件
在和可滑动组件使用的时候，记得一定要和nestedScroll属性配合使用，用于解决滑动冲突，除此之外，还需要传递滑动组件的scroller属性，用于手势操作。
二流小码农
14 2
鸿蒙开发：一个轻盈的上拉下拉刷新组件
64ml4hiqojt5k
|
1天前
|
索引
【HarmonyOS Next开发】日历组件详细日界面组件
原生UI没有提供日历相关的组件，于是手撸了详细页面的日程。一开始打算使用list加tab的方式来实现切换的效果，但是list的切换是没有办法确定当前展示的索引的，所以没有办法实现日历内容动态添加等效果。在业内大佬的指导下，使用了两个swiper组件分别实现周和日的切换，实现了想要的效果
64ml4hiqojt5k
14 6
64ml4hiqojt5k
|
1天前
【HarmonyOS Next开发】：ListItemGroup使用
通过使用ListItemGroup和AlphabetIndexer两种类型组件，实现带标题分类和右侧导航栏的页面
64ml4hiqojt5k
81 61
二流小码农
|
1天前
|
安全 数据安全/隐私保护
鸿蒙开发：一文了解软键盘相关
软键盘最主要的就是合理的进行避让，不能遮挡可输入组件，再有多个输入框的时候，需要动态的进行设置高度，这一点需要注意。
二流小码农
14 2
鸿蒙开发：一文了解软键盘相关
猫林老师
|
2天前
|
开发框架 前端开发 JavaScript
uniapp开发鸿蒙，是前端新出路吗？
相信不少前端从业者一听uniapp支持开发鸿蒙Next后非常振奋。猫林老师作为7年前端er也是非常激动，第一时间体验了下。在这里也给大家分享一下我的看法
猫林老师
32 17
64ml4hiqojt5k
|
1天前
|
开发者
【HarmonyOS Next开发】用户文件访问
文件所有者为登录到该终端设备的用户，包括用户私有的图片、视频、音频、文档等。 应用对用户文件的创建、访问、删除等行为，需要提前获取用户授权，或由用户操作完成。
64ml4hiqojt5k
20 10

热门文章

最新文章

  • 1
    嵌入式linux/鸿蒙开发板(IMX6ULL）开发（一） 嵌入式Linux开发基本概念以及开发流程介绍
  • 2
    【鸿蒙软件开发】UIAbility组件概况、生命周期与启动模式
  • 3
    嵌入式linux/鸿蒙开发板(IMX6ULL）开发（四）传输文件
  • 4
    【鸿蒙软件开发】文本显示（Text/Span）
  • 5
    嵌入式linux/鸿蒙开发板(IMX6ULL）开发流程（六）烧写整个系统或更新部分系统
  • 6
    scrcpy投屏工具的在harmonyOS开发上的使用
  • 7
    【HarmonyOS 4.0 应用开发实战】ArkTS 快速入门
  • 8
    【华为鸿蒙系统学习】- HarmonyOS4.0开发|自学篇
  • 9
    嵌入式linux/鸿蒙开发板(IMX6ULL）开发（七）Ubuntu开发环境配置
  • 10
    嵌入式linux/鸿蒙开发板(IMX6ULL）开发（三十一）驱动进化之路：设备树的引入及简明教程（中）
  • 1
    鸿蒙HarmonyOS 与 Android 的NDK有什么区别？
    413
  • 2
    润开鸿与蚂蚁数科达成战略合作，发布基于鸿蒙的mPaaS移动应用开发产品
    133
  • 3
    HarmonyOS应用开发者基础认证 模拟考试 题库
    574
  • 4
    日志服务 HarmonyOS NEXT 日志采集最佳实践
    117414
  • 5
    MediaBox音视频终端SDK已适配鸿蒙星河版（HarmonyOS NEXT）
    324
  • 6
    首个身份认证SDK适配鸿蒙系统！阿里云金融级实人认证产品再升级
    630
  • 7
    “纯血鸿蒙”要来了，赶紧入手学习吧
    403
  • 8
    HarmonyOS的功能及场景应用
    271
  • 9
    鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Scroll容器组件
    682
  • 10
    鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之RowSplit容器组件
    165

    • 相关电子书

    更多
  • UI2CODE智能生成flutter代码--整体架构 【上叶】
  • 低代码开发师（初级）实战教程
  • 阿里巴巴DevOps 最佳实践手册

    • 相关实验场景

    更多
  • 图表样式智能美化工具
  • 前端开发基础3：CSS3常见显示属性
    • 下一篇
    DataWorks售前咨询