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

伤心客  论坛元老 | 2024-12-23 16:30:56 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1006|帖子 1006|积分 3018

媒介

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

提供下拉选择菜单，可以让用户在多个选项之间选择。
说明
该组件从API Version 8开始支持。后续版本如有新增内容，则接纳上角标单独标记该内容的起始版本。
1.1 子组件

无
1.2 接口

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

参数为SelectOption的数组
参数

SelectOption对象说明
参数：value，参数范例：ResourceStr，是否必填：是
功能形貌：下拉选项内容。
参数：icon，参数范例：ResourceStr，是否必填：否
功能形貌：下拉选项图片。
1.3 属性

除支持通用属性外，还支持以部属性：
属性名称：selected，属性范例：number，属性形貌：设置下拉菜单初始选项的索引，第一项的索引为0。
当不设置selected属性时，默认选择值为-1，菜单项不选中。
属性名称：value，属性范例：string，属性形貌：设置下拉按钮本身的文本内容。 当菜单选中时默认会替换为菜单项文本内容。
如下所示：
  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct SelectExample {
  5.   build() {
  6.     Column() {
  7.       Select([{ value: 'aaa', icon: "/common/public_icon.svg" },
  8.         { value: 'bbb', icon: "/common/public_icon.svg" },
  9.         { value: 'ccc', icon: "/common/public_icon.svg" },
  10.         { value: 'ddd', icon: "/common/public_icon.svg" }])
  11.         .selected(2)
  12.         .value('TTTTT')
  13.         .font({ size: 16, weight: 500 })
  14.         .fontColor('#182431')
  15.         .selectedOptionFont({ size: 16, weight: 400 })
  16.         .optionFont({ size: 16, weight: 400 })
  17.         .onSelect((index: number) => {
  18.           console.info('Select:' + index)
  19.         })
  20.     }.width('100%')
  21.   }
  22. }
复制代码

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


  • 未选择时

  • 选择后

属性名称：font，属性范例：Font，属性形貌：设置下拉按钮本身的文本样式。
默认值：
  1. {
  2. size: '16fp',
  3. weight: FontWeight.Medium
  4. }
复制代码
属性名称：fontColor，属性范例：ResourceColor，属性形貌：设置下拉按钮本身的文本颜色。
默认值：‘#E6FFFFFF’
属性名称：selectedOptionBgColor，属性范例：ResourceColor，属性形貌：设置下拉菜单选中项的背景致。
默认值：‘#33007DFF’
属性名称：selectedOptionFont，属性范例：Font，属性形貌：设置下拉菜单选中项的文本样式。
默认值：
  1. {
  2. size: '16fp',
  3. weight: FontWeight.Regular
  4. }
复制代码
属性名称：selectedOptionFontColor，属性范例：ResourceColor，属性形貌：设置下拉菜单选中项的文本颜色。
默认值：‘#ff007dff’
属性名称：optionBgColor，属性范例：ResourceColor，属性形貌：设置下拉菜单项的背景致。
默认值：‘#ffffffff’
属性名称：optionFont，属性范例：Font，属性形貌：设置下拉菜单项的文本样式。
默认值：
  1. {
  2. size: '16fp',
  3. weight: FontWeight.Regular
  4. }
复制代码
属性名称：optionFontColor，属性范例：ResourceColor，属性形貌：设置下拉菜单项的文本颜色。
默认值：‘#ff182431’
1.4 事件

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

下拉菜单选中某一项的回调。
index：选中项的索引。
value：选中项的值。
1.5 示例代码

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct SelectExample {
  5.   build() {
  6.     Column() {
  7.       Select([{ value: 'aaa', icon: "/common/public_icon.svg" },
  8.         { value: 'bbb', icon: "/common/public_icon.svg" },
  9.         { value: 'ccc', icon: "/common/public_icon.svg" },
  10.         { value: 'ddd', icon: "/common/public_icon.svg" }])
  11.         .selected(2)
  12.         .value('TTTTT')
  13.         .font({ size: 16, weight: 500 })
  14.         .fontColor('#182431')
  15.         .selectedOptionFont({ size: 16, weight: 400 })
  16.         .optionFont({ size: 16, weight: 400 })
  17.         .onSelect((index: number) => {
  18.           console.info('Select:' + index)
  19.         })
  20.     }.width('100%')
  21.   }
  22. }
复制代码

二、Slider

滑动条组件，通常用于快速调治设置值，如音量调治、亮度调治等应用场景。
说明
该组件从API Version 7开始支持。后续版本如有新增内容，则接纳上角标单独标记该内容的起始版本。
2.1 子组件

无
2.2 接口

创建Slider的函数原型如下：
  1. 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。
  1. 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 示例代码

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct SliderExample {
  5.   @State outSetValueOne: number = 40
  6.   @State inSetValueOne: number = 40
  7.   @State outSetValueTwo: number = 40
  8.   @State inSetValueTwo: number = 40
  9.   @State vOutSetValueOne: number = 40
  10.   @State vInSetValueOne: number = 40
  11.   @State vOutSetValueTwo: number = 40
  12.   @State vInSetValueTwo: number = 40
  14.   build() {
  15.     Column({ space: 8 }) {
  16.       Text('outset slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15)
  17.       Row() {
  18.         Slider({
  19.           value: this.outSetValueOne,
  20.           min: 0,
  21.           max: 100,
  22.           style: SliderStyle.OutSet
  23.         })
  24.           .showTips(true)
  25.           .onChange((value: number, mode: SliderChangeMode) => {
  26.             this.outSetValueOne = value
  27.             console.info('value:' + value + 'mode:' + mode.toString())
  28.           })
  29.         // toFixed(0)将滑动条返回值处理为整数精度
  30.         Text(this.outSetValueOne.toFixed(0)).fontSize(12)
  31.       }
  32.       .width('80%')
  33.       Row() {
  34.         Slider({
  35.           value: this.outSetValueTwo,
  36.           step: 10,
  37.           style: SliderStyle.OutSet
  38.         })
  39.           .showSteps(true)
  40.           .onChange((value: number, mode: SliderChangeMode) => {
  41.             this.outSetValueTwo = value
  42.             console.info('value:' + value + 'mode:' + mode.toString())
  43.           })
  44.         Text(this.outSetValueTwo.toFixed(0)).fontSize(12)
  45.       }
  46.       .width('80%')
  48.       Text('inset slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15)
  49.       Row() {
  50.         Slider({
  51.           value: this.inSetValueOne,
  52.           min: 0,
  53.           max: 100,
  54.           style: SliderStyle.InSet
  55.         })
  56.           .blockColor('#191970')
  57.           .trackColor('#ADD8E6')
  58.           .selectedColor('#4169E1')
  59.           .showTips(true)
  60.           .onChange((value: number, mode: SliderChangeMode) => {
  61.             this.inSetValueOne = value
  62.             console.info('value:' + value + 'mode:' + mode.toString())
  63.           })
  64.         Text(this.inSetValueOne.toFixed(0)).fontSize(12)
  65.       }
  66.       .width('80%')
  67.       Row() {
  68.         Slider({
  69.           value: this.inSetValueTwo,
  70.           step: 10,
  71.           style: SliderStyle.InSet
  72.         })
  73.           .blockColor('#191970')
  74.           .trackColor('#ADD8E6')
  75.           .selectedColor('#4169E1')
  76.           .showSteps(true)
  77.           .onChange((value: number, mode: SliderChangeMode) => {
  78.             this.inSetValueTwo = value
  79.             console.info('value:' + value + 'mode:' + mode.toString())
  80.           })
  81.         Text(this.inSetValueTwo.toFixed(0)).fontSize(12)
  82.       }
  83.       .width('80%')
  85.       Row() {
  86.         Column() {
  87.           Text('vertical outset slider').fontSize(9).fontColor(0xCCCCCC).width('50%').margin(15)
  88.           Row() {
  89.             Slider({
  90.               value: this.vOutSetValueOne,
  91.               style: SliderStyle.OutSet,
  92.               direction: Axis.Vertical
  93.             })
  94.               .blockColor('#191970')
  95.               .trackColor('#ADD8E6')
  96.               .selectedColor('#4169E1')
  97.               .showTips(true)
  98.               .onChange((value: number, mode: SliderChangeMode) => {
  99.                 this.vOutSetValueOne = value
  100.                 console.info('value:' + value + 'mode:' + mode.toString())
  101.               })
  102.             Slider({
  103.               value: this.vOutSetValueTwo,
  104.               step: 10,
  105.               style: SliderStyle.OutSet,
  106.               direction: Axis.Vertical
  107.             })
  108.               .blockColor('#191970')
  109.               .trackColor('#ADD8E6')
  110.               .selectedColor('#4169E1')
  111.               .showSteps(true)
  112.               .onChange((value: number, mode: SliderChangeMode) => {
  113.                 this.vOutSetValueTwo = value
  114.                 console.info('value:' + value + 'mode:' + mode.toString())
  115.               })
  116.           }
  117.         }.width('50%').height(300)
  119.         Column() {
  120.           Text('vertical inset slider').fontSize(9).fontColor(0xCCCCCC).width('50%').margin(15)
  121.           Row() {
  122.             Slider({
  123.               value: this.vInSetValueOne,
  124.               style: SliderStyle.InSet,
  125.               direction: Axis.Vertical,
  126.               reverse: true // 竖向的Slider默认是上端是min值，下端是max值，因此想要从下往上滑动，需要设置reverse为true
  127.             })
  128.               .showTips(true)
  129.               .onChange((value: number, mode: SliderChangeMode) => {
  130.                 this.vInSetValueOne = value
  131.                 console.info('value:' + value + 'mode:' + mode.toString())
  132.               })
  133.             Slider({
  134.               value: this.vInSetValueTwo,
  135.               step: 10,
  136.               style: SliderStyle.InSet,
  137.               direction: Axis.Vertical,
  138.               reverse: true
  139.             })
  140.               .showSteps(true)
  141.               .onChange((value: number, mode: SliderChangeMode) => {
  142.                 this.vInSetValueTwo = value
  143.                 console.info('value:' + value + 'mode:' + mode.toString())
  144.               })
  145.           }
  146.         }.width('50%').height(300)
  147.       }
  148.     }.width('100%')
  149.   }
  150. }
复制代码

总结

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

伤心客

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表