下拉选择菜单

2024-01-22 17:26 更新

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

说明

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

子组件

接口

Select(options: Array<SelectOption>)

SelectOption对象说明

参数名

参数类型

必填

参数描述

value

ResourceStr

下拉选项内容。

icon

ResourceStr

下拉选项图片。

属性

除支持通用属性外,还支持以下属性:

名称

参数类型

描述

selected

number

设置下拉菜单初始选项的索引,第一项的索引为0。

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

value

string

设置下拉按钮本身的文本内容。 当菜单选中时默认会替换为菜单项文本内容。

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'

事件

名称

功能描述

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

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

index:选中项的索引。

value:选中项的值。

示例

  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. }

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号