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

    文章目录

    前言

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

    一、Select下拉菜单

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

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

    1.1 子组件

    无

    1.2 接口

    Select(options: Array<SelectOption>)

    • 1

    在这里插入图片描述

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    在这里插入图片描述

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

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

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

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

    默认值：

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

    • 1
    • 2
    • 3
    • 4

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

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

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

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

    • 1
    • 2
    • 3
    • 4

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

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

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

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

    • 1
    • 2
    • 3
    • 4

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

    1.4 事件

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

    • 1

    在这里插入图片描述

    下拉菜单选中某一项的回调。
    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%')
  }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    在这里插入图片描述

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

    • 1

    在这里插入图片描述

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

    • 1

    在这里插入图片描述

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150

    在这里插入图片描述

    总结

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

  • 相关阅读:
    微服务基础，分布式核心，常见微服务框架，SpringCloud概述，搭建SpringCloud微服务项目详细步骤，含源代码
    智能家居现状分析及未来展望
    [项目管理-28]：四象限法与任务的时间优先级管理
    【随缘题目集1】找不重复的数字，模拟实现aoti,宏实现offsetof
    2022-8-31 第六小组 瞒春 学习笔记
    NLP 文本表征方式
    用HTML+CSS做一个简单好看的校园社团网页
    真题磨练-20220903美团笔试算法反思学习（持续更新中）
    Linux：用户态与内核态
    机器人关节扭矩测量及其对导纳控制拖动示教的影响
  • 原文地址：https://blog.csdn.net/m0_62599305/article/details/134064469