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

简介: 【鸿蒙软件开发】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组件:滑动条组件,通常用于快速调节设置值,如音量调节、亮度调节等应用场景。

相关文章
|
22小时前
|
开发工具 UED
Flutter&鸿蒙next中封装一个输入框组件
本文介绍了如何创建一个简单的Flutter播客应用。首先,通过`flutter create`命令创建项目;接着,在`lib`目录下封装一个自定义输入框组件`CustomInput`;然后,在主应用文件`main.dart`中使用该输入框组件,实现简单的UI布局和功能;最后,通过`flutter run`启动应用。本文还提供了后续扩展建议,如状态管理、网络请求和UI优化。
73 1
|
6天前
|
编译器 API 开发工具
揭秘鸿蒙软件开发:如何构建跨设备智能生态?一场颠覆传统,引领未来的技术革命等你来探索!
【10月更文挑战第20天】华为鸿蒙系统正逐步构建全新的智能生态,打破设备间界限,实现OS与硬件解绑及跨端共享。鸿蒙提供完整开发工具链,如DevEco Studio、方舟编译器等,降低开发难度,提高效率。通过示例代码展示,鸿蒙支持跨设备协同工作,适用于智能家居、智能出行等多领域,推动智能生态发展。
21 4
|
8天前
|
JavaScript 数据管理 编译器
揭秘 ArkTS 的五大优势:如何让鸿蒙系统开发更高效、更简单?
【10月更文挑战第18天】ArkTS是专为鸿蒙系统设计的开发语言,结合了TypeScript的类型系统,并在分布式开发、UI开发、性能优化和API支持等方面进行了优化。它提供了一系列专门的API和语法糖,简化多设备协同开发,支持高效能和低功耗,助力开发者充分利用鸿蒙系统的分布式架构和强大功能。
25 5
|
8天前
|
JavaScript 数据管理 编译器
揭秘 ArkTS 与 TypeScript 的神秘差异:鸿蒙系统开发者的必备知识与实战技巧
【10月更文挑战第18天】ArkTS 是华为为鸿蒙系统(HarmonyOS)推出的开发语言,作为 TypeScript 的超集,它针对鸿蒙系统的分布式特性和需求进行了优化和扩展。ArkTS 强化了分布式数据管理、类型系统、编译与运行时性能,并支持声明式 UI 和专为鸿蒙设计的 API,使开发者能够更高效地开发跨设备协同工作的应用。
30 6
|
6天前
|
Java API 开发工具
揭秘鸿蒙软件开发:如何以一己之力,开启万物互联新纪元,重塑未来科技生态版图?
【10月更文挑战第20天】鸿蒙系统,华为推出的面向全场景的分布式操作系统,打破传统OS与硬件绑定,实现多端部署、生态共享。提供完整开发工具链,支持高效开发,开启万物互联新篇章。
17 3
|
7天前
|
JavaScript Java C++
ArkTS揭秘:如何在无‘类’的世界里,用组件与对象构建HarmonyOS应用的奇妙桥梁?
【10月更文挑战第19天】在鸿蒙系统的ArkTS开发中,类和对象的概念类似于传统OOP语言,但融入了声明式UI的特性。本文通过对比Java中的类和对象,详细介绍了如何在ArkTS中定义组件和实例化组件,并展示了实际开发中的应用示例。通过示例代码,读者可以清晰地理解ArkTS中类和对象的模拟方式及其灵活性。
17 1
|
7天前
|
JavaScript API 开发者
掌握ArkTS,打造HarmonyOS应用新视界:从“Hello World”到状态管理,揭秘鸿蒙UI开发的高效秘诀
【10月更文挑战第19天】ArkTS(ArkUI TypeScript)是华为鸿蒙系统中用于开发用户界面的声明式编程语言,结合了TypeScript和HarmonyOS的UI框架。本文介绍ArkTS的基本语法,包括组件结构、模板和脚本部分,并通过“Hello World”和计数器示例展示其使用方法。
19 1
|
10天前
|
JavaScript 前端开发 安全
TypeScript无缝衔接ArkTS:快速入门鸿蒙ArkTS基本语法
【10月更文挑战第12天】TypeScript无缝衔接ArkTS:快速入门鸿蒙ArkTS基本语法
51 0
TypeScript无缝衔接ArkTS:快速入门鸿蒙ArkTS基本语法
|
14天前
|
编解码 Dart API
鸿蒙Flutter实战:06-使用ArkTs开发Flutter鸿蒙插件
本文介绍了如何开发一个 Flutter 鸿蒙插件,实现 Flutter 与鸿蒙的混合开发及双端消息通信。通过定义 `MethodChannel` 实现 Flutter 侧的 token 存取方法,并在鸿蒙侧编写 `EntryAbility` 和 `ForestPlugin`,使用鸿蒙的首选项 API 完成数据的读写操作。文章还提供了注意事项和参考资料,帮助开发者更好地理解和实现这一过程。
45 0
HarmonyOS(鸿蒙)——滑动事件之上、下、左、右滑动
HarmonyOS(鸿蒙)——滑动事件之上、下、左、右滑动
351 0
HarmonyOS(鸿蒙)——滑动事件之上、下、左、右滑动

热门文章

最新文章