鸿蒙5.0版开发：ArkTS基础组件（Select）

往期鸿蒙全套实战文章必看：

• 鸿蒙开发核心知识点，看这篇文章就够了
  
• 最新版！鸿蒙HarmonyOS Next应用开发实战学习路线
  
• 鸿蒙HarmonyOS NEXT开发技术最全学习路线指南
  
• 鸿蒙应用开发实战项目，看这一篇文章就够了（部分项目附源码）
  

---

Select

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

无
接口

Select(options: Array<SelectOption>)
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
参数：
参数名参数类型必填参数形貌optionsArray<SelectOption>是设置下拉选项。 SelectOption对象说明

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
参数名参数类型必填参数形貌valueResourceStr是下拉选项内容。iconResourceStr否下拉选项图片。 属性

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

selected(value: number | Resource)
设置下拉菜单初始选项的索引，第一项的索引为0。当不设置selected属性或设置异常值时，默认选择值为-1，菜单项不选中；当设置为undefined、null时，选中第一项。
从API version 10开始，该属性支持$$双向绑定变量。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valuenumber | Resource11+是下拉菜单初始选项的索引。 value

value(value: ResourceStr)
设置下拉按钮本身的文本内容。当菜单选中时默认会更换为菜单项文本内容。
从API version 10开始，该参数支持$$双向绑定变量。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valueResourceStr11+是下拉按钮本身的文本内容。 controlSize12+

controlSize(value: ControlSize)
设置Select组件的尺寸。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valueControlSize11+是Select组件的尺寸。
默认值:ControlSize.NORMAL controlSize、width、height接口作用优先级：
1）如果开发者只设置了width和height，当笔墨大小设置的是比较大的值的时候，笔墨超出组件大小，且以省略号方式表现；
2）如果开发者只设置了controlSize，没有设置width和height，组件宽高自适应笔墨，笔墨不超出组件，并设置最小宽度minWidth和最小高度minHeight；
3）如果controlSize、width、height接口都设置了，width和height设置的值生效，但如果width和height设置的值小于controlSize设置的最小宽度minWidth和最小高度minHeight，width和height设置的值不生效，宽高仍保持controlSize设置的最小宽度minWidth和最小高度minHeight。
menuItemContentModifier12+

menuItemContentModifier(modifier: ContentModifier<MenuItemConfiguration>)
定制Select下拉菜单项内容区的方法。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明modifierContentModifier<MenuItemConfiguration>是在Select组件上，定制下拉菜单项内容区的方法。
modifier: 内容修改器，开发者需要自定义class实现ContentModifier接口。 font

font(value: Font)
设置下拉按钮本身的文本样式。当size为0的时候，文本不表现，当size为负值的时候，文本的size按照默认值表现。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valueFont是下拉按钮本身的文本样式。
API Version 11及从前默认值：
{
size: ‘16fp’,
weight: FontWeight.Medium
}
从API Version 12以后，
如果设置controlSize的值为：controlSize.SMALL，size默认值是’14fp’，否则还是’16fp’。 fontColor

fontColor(value: ResourceColor)
设置下拉按钮本身的文本颜色。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valueResourceColor是下拉按钮本身的文本颜色。
默认值：‘#E5182431’ selectedOptionBgColor

selectedOptionBgColor(value: ResourceColor)
设置下拉菜单选中项的背景致。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valueResourceColor是下拉菜单选中项的背景致。
默认值：‘#33007DFF’ selectedOptionFont

selectedOptionFont(value: Font)
设置下拉菜单选中项的文本样式。当size为0的时候，文本不表现，当size为负值的时候，文本的size按照默认值表现。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valueFont是下拉菜单选中项的文本样式。
默认值：
{
size: ‘16fp’,
weight: FontWeight.Regular
} selectedOptionFontColor

selectedOptionFontColor(value: ResourceColor)
设置下拉菜单选中项的文本颜色。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valueResourceColor是下拉菜单选中项的文本颜色。
默认值：‘#ff007dff’ optionBgColor

optionBgColor(value: ResourceColor)
设置下拉菜单项的背景致。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valueResourceColor是下拉菜单项的背景致。
默认值：‘#ffffffff’ optionFont

optionFont(value: Font)
设置下拉菜单项的文本样式。当size为0的时候，文本不表现，当size为负值的时候，文本的size按照默认值表现。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valueFont是下拉菜单项的文本样式。
默认值：
{
size: ‘16fp’,
weight: FontWeight.Regular
} optionFontColor

optionFontColor(value: ResourceColor)
设置下拉菜单项的文本颜色。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valueResourceColor是下拉菜单项的文本颜色。
默认值：‘#ff182431’ space10+

space(value: Length)
设置下拉菜单项的文本与箭头之间的间距。不支持设置百分比。设置为null、undefined，大概小于即是8的值，取默认值。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valueLength是下拉菜单项的文本与箭头之间的间距。
默认值：8 arrowPosition10+

arrowPosition(value: ArrowPosition)
设置下拉菜单项的文本与箭头之间的对齐方式。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valueArrowPosition是下拉菜单项的文本与箭头之间的对齐方式。
默认值：ArrowPosition.END menuAlign10+

menuAlign(alignType: MenuAlignType, offset?: Offset)
设置下拉按钮与下拉菜单间的对齐方式。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明alignTypeMenuAlignType是对齐方式类型。
默认值：MenuAlignType.STARToffsetOffset否按照对齐类型对齐后，下拉菜单相对下拉按钮的偏移量。
默认值：{dx: 0, dy: 0} optionWidth11+

optionWidth(value: Dimension | OptionWidthMode )
设置下拉菜单项的宽度，不支持设置百分比。OptionWidthMode类型为罗列类型，OptionWidthMode决定下拉菜单是否继承下拉按钮宽度。
当设置为undefined、null、负数时，属性不生效，菜单项宽度设为默认值，即菜单默认宽度为2栅格。
当菜单项设置宽度小于最小宽度56vp时，菜单宽度回弹至2栅格。正常值范围大于即是0。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valueDimension | OptionWidthMode是下拉菜单项的宽度。 optionHeight11+

optionHeight(value: Dimension)
设置下拉菜单表现的最大高度，不支持设置百分比。下拉菜单的默认最大高度是屏幕可用高度的80%，设置的菜单最大高度不能凌驾默认最大高度。
当设置为undefined、null、负数与零时，属性不生效，下拉菜单最大高度设为默认值，即下拉菜单最大高度默认值为屏幕可用高度的80%。
正常值范围大于0。如果下拉菜单全部选项的现实高度没有设定的高度大，下拉菜单的高度按现实高度表现。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valueDimension是下拉菜单表现的最大高度。 menuBackgroundColor11+

menuBackgroundColor(value: ResourceColor)
设置下拉菜单的背景致。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valueResourceColor是下拉菜单的背景致。
默认值：Color.Transparent menuBackgroundBlurStyle11+

menuBackgroundBlurStyle(value: BlurStyle)
设置下拉菜单的背景含糊材质。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valueBlurStyle是下拉菜单的背景含糊材质。
默认值：BlurStyle.COMPONENT_ULTRA_THICK OptionWidthMode11+罗列说明

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
名称形貌FIT_CONTENT设置该值时，下拉菜单宽度按默认2栅格表现。FIT_TRIGGER设置下拉菜单继承下拉按钮宽度。 ArrowPosition10+罗列说明

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
名称形貌END10+笔墨在前，箭头在后。START10+箭头在前，笔墨在后。 MenuAlignType10+罗列说明

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
名称形貌START按照语言方向起始端对齐。CENTER居中对齐。END按照语言方向末端对齐。 MenuItemConfiguration12+对象说明

参数名类型必填说明valueResourceStr是下拉菜单项的文本内容。iconResourceStr否下拉菜单项的图片内容。selectedboolean是下拉菜单项是否被选中。
默认值：falseindexnumber是下拉菜单项的索引。triggerSelect(index: number, value: string) => void是下拉菜单选中某一项的回调函数。
index: 选中菜单项的索引。
value: 选中菜单项的文本。
说明: index会赋值给事件onSelect回调中的索引参数； value会返回给Select组件表现，同时会赋值给事件onSelect回调中的文本参数。 事件

onSelect

onSelect(callback: (index: number, value: string) => void)
下拉菜单选中某一项的回调。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明indexnumber是选中项的索引。valuestring是选中项的值。 示例1

1. // xxx.ets
2. @Entry
3. @Component
4. struct SelectExample {
5.   @State text: string = "TTTTT"
6.   @State index: number = 2
7.   @State space: number = 8
8.   @State arrowPosition: ArrowPosition = ArrowPosition.END
9.   build() {
10.     Column() {
11.       Select([{ value: 'aaa', icon: $r("app.media.selecticon") },
12.         { value: 'bbb', icon: $r("app.media.selecticon") },
13.         { value: 'ccc', icon: $r("app.media.selecticon") },
14.         { value: 'ddd', icon: $r("app.media.selecticon") }])
15.         .selected(this.index)
16.         .value(this.text)
17.         .font({ size: 16, weight: 500 })
18.         .fontColor('#182431')
19.         .selectedOptionFont({ size: 16, weight: 400 })
20.         .optionFont({ size: 16, weight: 400 })
21.         .space(this.space)
22.         .arrowPosition(this.arrowPosition)
23.         .menuAlign(MenuAlignType.START, {dx:0, dy:0})
24.         .optionWidth(200)
25.         .optionHeight(300)
26.         .onSelect((index:number, text?: string | undefined)=>{
27.           console.info('Select:' + index)
28.           this.index = index;
29.           if(text){
30.             this.text = text;
31.           }
32.         })
33.     }.width('100%')
34.   }
35. }

复制代码

示例2

该示例实现了一个自定义下拉菜选项的Select组件。自定义下拉菜单选项样式为“文本 + 图片 + 空白间隔 + 文本 + 绘制三角形”，点击菜单选项后Select组件表现菜单选项的文本内容。

1. import { MenuItemModifier } from '@ohos.arkui.modifier'
3. class MyMenuItemContentModifier implements ContentModifier<MenuItemConfiguration> {
4.   modifierText: string = ""
5.   constructor(text: string) {
6.     this.modifierText = text;
7.   }
8.   applyContent(): WrappedBuilder<[MenuItemConfiguration]> {
9.     return wrapBuilder(MenuItemBuilder)
10.   }
11. }
13. @Builder
14. function MenuItemBuilder(configuration: MenuItemConfiguration) {
15.   Row() {
16.     Text(configuration.value)
17.     Blank()
18.     Image(configuration.icon).size({ width: 40, height: 40 })
19.     Blank(30)
20.     Text((configuration.contentModifier as MyMenuItemContentModifier).modifierText)
21.     Path()
22.       .width('100px')
23.       .height('150px')
24.       .commands('M40 0 L80 100 L0 100 Z')
25.       .fillOpacity(0)
26.       .stroke(Color.Black)
27.       .strokeWidth(3)
28.   }
29.   .onClick(() => {
30.     configuration.triggerSelect(configuration.index, configuration.value.valueOf().toString())
31.   })
32. }
34. @Entry
35. @Component
36. struct SelectExample {
37.   @State text: string = "有modifier"
38.   build() {
39.     Column() {
40.       Row() {
41.         Select([{ value: 'item1', icon: $r("app.media.icon") },
42.           { value: 'item2', icon: $r("app.media.icon") }])
43.           .value(this.text)
44.           .onSelect((index:number, text?: string)=>{
45.             console.info('Select index:' + index)
46.             console.info('Select text:' + text)
47.           })
48.           .menuItemContentModifier(new MyMenuItemContentModifier("我来自Modifier"))
50.       }.alignItems(VerticalAlign.Center).height("50%")
51.     }
52.   }
53. }

复制代码

看完三件事❤️

• 如果你以为这篇内容对你还蛮有资助，我想约请你帮我三个小忙：
  
• 点赞，转发，有你们的 『点赞和批评』，才是我创造的动力。
  
• 关注作者，不定期分享原创知识。
  
• 同时可以等候后续文章ing