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

人才程序员2023-10-31 16:44

文章目录

前言

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

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

一、Select下拉菜单

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

说明

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

1.1 子组件

无

1.2 接口

javascript 复制代码 
Select(options: Array<SelectOption>)

参数为SelectOption的数组

参数

SelectOption对象说明

参数：value，参数类型：ResourceStr，是否必填：是

功能描述：下拉选项内容。

参数：icon，参数类型：ResourceStr，是否必填：否

功能描述：下拉选项图片。

1.3 属性

除支持通用属性外，还支持以下属性：

属性名称：selected，属性类型：number，属性描述：设置下拉菜单初始选项的索引，第一项的索引为0。

当不设置selected属性时，默认选择值为-1，菜单项不选中。

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

如下所示：

javascript 复制代码 
// 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，属性描述：设置下拉按钮本身的文本样式。

默认值：

javascript 复制代码 
{
size: '16fp',
weight: FontWeight.Medium
}

属性名称：fontColor，属性类型：ResourceColor，属性描述：设置下拉按钮本身的文本颜色。

默认值：'#E6FFFFFF'

属性名称：selectedOptionBgColor，属性类型：ResourceColor，属性描述：设置下拉菜单选中项的背景色。

默认值：'#33007DFF'

属性名称：selectedOptionFont，属性类型：Font，属性描述：设置下拉菜单选中项的文本样式。

默认值：

javascript 复制代码 
{
size: '16fp',
weight: FontWeight.Regular
}

属性名称：selectedOptionFontColor，属性类型：ResourceColor，属性描述：设置下拉菜单选中项的文本颜色。

默认值：'#ff007dff'

属性名称：optionBgColor，属性类型：ResourceColor，属性描述：设置下拉菜单项的背景色。

默认值：'#ffffffff'

属性名称：optionFont，属性类型：Font，属性描述：设置下拉菜单项的文本样式。

默认值：

javascript 复制代码 
{
size: '16fp',
weight: FontWeight.Regular
}

属性名称：optionFontColor，属性类型：ResourceColor，属性描述：设置下拉菜单项的文本颜色。

默认值：'#ff182431'

1.4 事件

javascript 复制代码 
onSelect(callback: (index: number, value?: string) => void)

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

index：选中项的索引。

value：选中项的值。

1.5 示例代码

javascript 复制代码 
// 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的函数原型如下：

javascript 复制代码 
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。

javascript 复制代码 
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 示例代码

javascript 复制代码 
// 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组件：滑动条组件，通常用于快速调节设置值，如音量调节、亮度调节等应用场景。

相关推荐
SuperHeroWu71 小时前
【HarmonyOS】键盘遮挡输入框UI布局处理
华为·harmonyos·压缩·keyboard·键盘遮挡·抬起
Winston Wood2 小时前
Android Parcelable和Serializable的区别与联系
android·序列化
清风徐来辽2 小时前
Android 项目模型配置管理
android
鹏大师运维2 小时前
【功能介绍】信创终端系统上各WPS版本的授权差异
linux·wps·授权·麒麟·国产操作系统·1024程序员节·统信uos
帅得不敢出门2 小时前
Gradle命令编译Android Studio工程项目并签名
android·ide·android studio·gradlew
problc3 小时前
Flutter中文字体设置指南：打造个性化的应用体验
android·javascript·flutter
亦枫Leonlew3 小时前
微积分复习笔记 Calculus Volume 1 - 4.7 Applied Optimization Problems
笔记·数学·微积分·1024程序员节
小肥象不是小飞象3 小时前
（六千字心得笔记）零基础C语言入门第八课——函数（上）
c语言·开发语言·笔记·1024程序员节
sanzk5 小时前
华为鸿蒙应用开发
华为·harmonyos
SoraLuna10 小时前
「Mac畅玩鸿蒙与硬件28」UI互动应用篇5 - 滑动选择器实现
macos·ui·harmonyos
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10红米手机使用google play