Harmony OS 选项列表组件-Select

2026 年 2 月
一	二	三	四	五	六	日
	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

Select

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

说明

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

子组件

无

接口

Select(options: Array<SelectOption>)

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
options	Array<SelectOption>	是	设置下拉选项。

SelectOption对象说明

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称	类型	必填	说明
value	ResourceStr	是	下拉选项内容。元服务API：从API version 11开始，该接口支持在元服务中使用。
icon	ResourceStr	否	下拉选项图片。元服务API：从API version 11开始，该接口支持在元服务中使用。
symbolIcon12+	SymbolGlyphModifier	否	下拉选项Symbol图片。 symbolIcon优先级高于icon。元服务API：从API version 12开始，该接口支持在元服务中使用。

名称

类型

必填

说明

value

ResourceStr

是

下拉选项内容。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

icon

ResourceStr

否

下拉选项图片。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

symbolIcon12+

SymbolGlyphModifier

否

下拉选项Symbol图片。

symbolIcon优先级高于icon。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

属性

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

selected

selected(value: number | Resource)

设置下拉菜单初始选项的索引，第一项的索引为0。当不设置selected属性或设置异常值时，默认选择值为-1，菜单项不选中；当设置为undefined、null时，选中第一项。

从API version 10开始，该属性支持$$双向绑定变量。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
value	number \| Resource11+	是	下拉菜单初始选项的索引。

value

value(value: ResourceStr)

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

从API version 10开始，该参数支持$$双向绑定变量。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
value	ResourceStr11+	是	下拉按钮本身的文本内容。

controlSize12+

controlSize(value: ControlSize)

设置Select组件的尺寸。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
value	ControlSize11+	是	Select组件的尺寸。默认值:ControlSize.NORMAL

参数名

类型

必填

说明

value

ControlSize11+

是

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下拉菜单项内容区的方法。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
modifier	ContentModifier<MenuItemConfiguration>	是	在Select组件上，定制下拉菜单项内容区的方法。 modifier: 内容修改器，开发者需要自定义class实现ContentModifier接口。

参数名

类型

必填

说明

modifier

ContentModifier<MenuItemConfiguration>

是

在Select组件上，定制下拉菜单项内容区的方法。

modifier: 内容修改器，开发者需要自定义class实现ContentModifier接口。

divider12+

divider(options: Optional<DividerOptions> | null)

设置分割线样式，不设置该属性则按“默认值”展示分割线。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
options	Optional<DividerOptions> \| null	是	1.设置DividerOptions，则按设置的样式显示分割线。默认值： { strokeWidth: ‘1px’ , color: ‘#33182431’ } 2.设置为null时，不显示分割线。 3.strokeWidth设置过宽时，会覆盖文字。分割线会从每一个Item底部开始，同时向上向下画分割线。 4.startMargin和endMargin的默认值与不设置divider属性时的分割线样式保持一致。startMargin和endMargin的和与optionWidth的值相等时，不显示分割线。 startMargin和endMargin的和超过optionWidth的值时，按照默认样式显示分割线。

参数名

类型

必填

说明

options

Optional<DividerOptions> | null

是

1.设置DividerOptions，则按设置的样式显示分割线。

默认值：

{

strokeWidth: ‘1px’ ,

color: ‘#33182431’

}

2.设置为null时，不显示分割线。

3.strokeWidth设置过宽时，会覆盖文字。分割线会从每一个Item底部开始，同时向上向下画分割线。

4.startMargin和endMargin的默认值与不设置divider属性时的分割线样式保持一致。startMargin和endMargin的和与optionWidth的值相等时，不显示分割线。 startMargin和endMargin的和超过optionWidth的值时，按照默认样式显示分割线。

font

font(value: Font)

设置下拉按钮本身的文本样式。当size为0的时候，文本不显示，当size为负值的时候，文本的size按照默认值显示。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
value	Font	是	下拉按钮本身的文本样式。 API Version 11及以前默认值： { size: $r(‘sys.float.ohos_id_text_size_button1’), weight: FontWeight.Medium } API Version 12以后，如果设置controlSize的值为：controlSize.SMALL，size默认值是$r(‘sys.float.ohos_id_text_size_button2’)，否则为$r(‘sys.float.ohos_id_text_size_button1’)。

参数名

类型

必填

说明

value

Font

是

下拉按钮本身的文本样式。

API Version 11及以前默认值：

{

size: $r(‘sys.float.ohos_id_text_size_button1’),

weight: FontWeight.Medium

}

API Version 12以后，如果设置controlSize的值为：controlSize.SMALL，size默认值是$r(‘sys.float.ohos_id_text_size_button2’)，否则为$r(‘sys.float.ohos_id_text_size_button1’)。

fontColor

fontColor(value: ResourceColor)

设置下拉按钮本身的文本颜色。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
value	ResourceColor	是	下拉按钮本身的文本颜色。默认值：$r(‘sys.color.ohos_id_color_text_primary’)混合$r(‘sys.color.ohos_id_alpha_content_primary’)的透明度。

参数名

类型

必填

说明

value

ResourceColor

是

下拉按钮本身的文本颜色。

默认值：$r(‘sys.color.ohos_id_color_text_primary’)混合$r(‘sys.color.ohos_id_alpha_content_primary’)的透明度。

selectedOptionBgColor

selectedOptionBgColor(value: ResourceColor)

设置下拉菜单选中项的背景色。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
value	ResourceColor	是	下拉菜单选中项的背景色。默认值：$r(‘sys.color.ohos_id_color_component_activated’)混合$r(‘sys.color.ohos_id_alpha_highlight_bg’)的透明度。

参数名

类型

必填

说明

value

ResourceColor

是

下拉菜单选中项的背景色。

默认值：$r(‘sys.color.ohos_id_color_component_activated’)混合$r(‘sys.color.ohos_id_alpha_highlight_bg’)的透明度。

selectedOptionFont

selectedOptionFont(value: Font)

设置下拉菜单选中项的文本样式。当size为0的时候，文本不显示，当size为负值的时候，文本的size按照默认值显示。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
value	Font	是	下拉菜单选中项的文本样式。默认值： { size: $r(‘sys.color.ohos_id_text_size_body1’), weight: FontWeight.Regular }

参数名

类型

必填

说明

value

Font

是

下拉菜单选中项的文本样式。

默认值：

{

size: $r(‘sys.color.ohos_id_text_size_body1’),

weight: FontWeight.Regular

}

selectedOptionFontColor

selectedOptionFontColor(value: ResourceColor)

设置下拉菜单选中项的文本颜色。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
value	ResourceColor	是	下拉菜单选中项的文本颜色。默认值：$r(‘sys.color.ohos_id_color_text_primary_activated’)

参数名

类型

必填

说明

value

ResourceColor

是

下拉菜单选中项的文本颜色。

默认值：$r(‘sys.color.ohos_id_color_text_primary_activated’)

optionBgColor

optionBgColor(value: ResourceColor)

设置下拉菜单项的背景色。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
value	ResourceColor	是	下拉菜单项的背景色。默认值： API version 11之前，默认值为Color.White。 API version 11及之后，默认值为Color.Transparent。

参数名

类型

必填

说明

value

ResourceColor

是

下拉菜单项的背景色。

默认值：

API version 11之前，默认值为Color.White。

API version 11及之后，默认值为Color.Transparent。

optionFont

optionFont(value: Font)

设置下拉菜单项的文本样式。当size为0的时候，文本不显示，当size为负值的时候，文本的size按照默认值显示。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
value	Font	是	下拉菜单项的文本样式。默认值： { size: $r(‘sys.float.ohos_id_text_size_body1’), weight: FontWeight.Regular }

参数名

类型

必填

说明

value

Font

是

下拉菜单项的文本样式。

默认值：

{

size: $r(‘sys.float.ohos_id_text_size_body1’),

weight: FontWeight.Regular

}

optionFontColor

optionFontColor(value: ResourceColor)

设置下拉菜单项的文本颜色。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
value	ResourceColor	是	下拉菜单项的文本颜色。默认值：$r(‘sys.color.ohos_id_color_text_primary’)

参数名

类型

必填

说明

value

ResourceColor

是

下拉菜单项的文本颜色。

默认值：$r(‘sys.color.ohos_id_color_text_primary’)

space10+

space(value: Length)

设置下拉菜单项的文本与箭头之间的间距。不支持设置百分比。设置为null、undefined，或者小于等于8的值，取默认值。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
value	Length	是	下拉菜单项的文本与箭头之间的间距。默认值：8

参数名

类型

必填

说明

value

Length

是

下拉菜单项的文本与箭头之间的间距。

默认值：8

arrowPosition10+

arrowPosition(value: ArrowPosition)

设置下拉菜单项的文本与箭头之间的对齐方式。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
value	ArrowPosition	是	下拉菜单项的文本与箭头之间的对齐方式。默认值：ArrowPosition.END

参数名

类型

必填

说明

value

ArrowPosition

是

下拉菜单项的文本与箭头之间的对齐方式。

默认值：ArrowPosition.END

menuAlign10+

menuAlign(alignType: MenuAlignType, offset?: Offset)

设置下拉按钮与下拉菜单间的对齐方式。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
alignType	MenuAlignType	是	对齐方式类型。默认值：MenuAlignType.START
offset	Offset	否	按照对齐类型对齐后，下拉菜单相对下拉按钮的偏移量。默认值：{dx: 0, dy: 0}

参数名

类型

必填

说明

alignType

MenuAlignType

是

对齐方式类型。

默认值：MenuAlignType.START

offset

Offset

否

按照对齐类型对齐后，下拉菜单相对下拉按钮的偏移量。

默认值：{dx: 0, dy: 0}

optionWidth11+

optionWidth(value: Dimension | OptionWidthMode )

设置下拉菜单项的宽度，不支持设置百分比。OptionWidthMode类型为枚举类型，OptionWidthMode决定下拉菜单是否继承下拉按钮宽度。

当设置为异常值或小于最小宽度56vp时，属性不生效，菜单项宽度设为默认值，即菜单默认宽度为2栅格。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
value	Dimension \| OptionWidthMode	是	下拉菜单项的宽度。

optionHeight11+

optionHeight(value: Dimension)

设置下拉菜单显示的最大高度，不支持设置百分比。下拉菜单的默认最大高度是屏幕可用高度的80%，设置的菜单最大高度不能超过默认最大高度。

当设置为异常值或零时，属性不生效，下拉菜单最大高度设为默认值，即下拉菜单最大高度默认值为屏幕可用高度的80%。

如果下拉菜单所有选项的实际高度没有设定的高度大，下拉菜单的高度按实际高度显示。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
value	Dimension	是	下拉菜单显示的最大高度。

menuBackgroundColor11+

menuBackgroundColor(value: ResourceColor)

设置下拉菜单的背景色。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
value	ResourceColor	是	下拉菜单的背景色。默认值： API version 11之前，默认值为$r(‘sys.color.ohos_id_color_card_bg’)。 API version 11及之后，默认值为Color.Transparent。

参数名

类型

必填

说明

value

ResourceColor

是

下拉菜单的背景色。

默认值：

API version 11之前，默认值为$r(‘sys.color.ohos_id_color_card_bg’)。

API version 11及之后，默认值为Color.Transparent。

menuBackgroundBlurStyle11+

menuBackgroundBlurStyle(value: BlurStyle)

设置下拉菜单的背景模糊材质。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
value	BlurStyle	是	下拉菜单的背景模糊材质。默认值：BlurStyle.COMPONENT_ULTRA_THICK

参数名

类型

必填

说明

value

BlurStyle

是

下拉菜单的背景模糊材质。

默认值：BlurStyle.COMPONENT_ULTRA_THICK

ArrowPosition10+枚举说明

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称	描述
END	文字在前，箭头在后。
START	箭头在前，文字在后。

MenuAlignType10+枚举说明

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称	值	说明
START	0	按照语言方向起始端对齐。
CENTER	1	居中对齐。
END	2	按照语言方向末端对齐。

MenuItemConfiguration12+对象说明

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称	类型	必填	说明
value	ResourceStr	是	下拉菜单项的文本内容。
icon	ResourceStr	否	下拉菜单项的图片内容。
symbolIcon12+	SymbolGlyphModifier	否	下拉选项Symbol图片内容。
selected	boolean	是	下拉菜单项是否被选中。默认值：false
index	number	是	下拉菜单项的索引。
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

参数：

参数名	类型	必填	说明
index	number	是	选中项的索引。
value	string	是	选中项的值。

示例1（设置下拉菜单）

该示例通过配置SelectOptions实现下拉菜单。

// xxx.ets
@Entry
@Component
struct SelectExample {
  @State text: string = "TTTTT"
  @State index: number = 2
  @State space: number = 8
  @State arrowPosition: ArrowPosition = ArrowPosition.END
 
 
  build() {
    Column() {
      Select([{ value: 'aaa', icon: $r("app.media.selection") },
        { value: 'bbb', icon: $r("app.media.selection") },
        { value: 'ccc', icon: $r("app.media.selection") },
        { value: 'ddd', icon: $r("app.media.selection") }])
        .selected(this.index)
        .value(this.text)
        .font({ size: 16, weight: 500 })
        .fontColor('#182431')
        .selectedOptionFont({ size: 16, weight: 400 })
        .optionFont({ size: 16, weight: 400 })
        .space(this.space)
        .arrowPosition(this.arrowPosition)
        .menuAlign(MenuAlignType.START, { dx: 0, dy: 0 })
        .optionWidth(200)
        .optionHeight(300)
        .onSelect((index: number, text?: string | undefined) => {
          console.info('Select:' + index)
          this.index = index;
          if (text) {
            this.text = text;
          }
        })
    }.width('100%')
  }
}

// xxx.ets

@Entry

@Component

struct SelectExample {

@State text: string = "TTTTT"

@State index: number = 2

@State space: number = 8

@State arrowPosition: ArrowPosition = ArrowPosition.END

build() {

Column() {

Select([{ value: 'aaa', icon: $r("app.media.selection") },

{ value: 'bbb', icon: $r("app.media.selection") },

{ value: 'ccc', icon: $r("app.media.selection") },

{ value: 'ddd', icon: $r("app.media.selection") }])

.selected(this.index)

.value(this.text)

.font({ size: 16, weight: 500 })

.fontColor('#182431')

.selectedOptionFont({ size: 16, weight: 400 })

.optionFont({ size: 16, weight: 400 })

.space(this.space)

.arrowPosition(this.arrowPosition)

.menuAlign(MenuAlignType.START, { dx: 0, dy: 0 })

.optionWidth(200)

.optionHeight(300)

.onSelect((index: number, text?: string | undefined) => {

console.info('Select:' + index)

this.index = index;

if (text) {

this.text = text;

}

})

}.width('100%')

}

示例2（设置symbol类型图标）

该示例实现了一个下拉菜单中图片为Symbol的Select组件

// xxx.ets
import { SymbolGlyphModifier } from '@kit.ArkUI'
 
 
@Entry
@Component
struct SelectExample {
  @State text: string = "TTTTT"
  @State index: number = 2
  @State space: number = 8
  @State arrowPosition: ArrowPosition = ArrowPosition.END
  @State symbolModifier1: SymbolGlyphModifier =
    new SymbolGlyphModifier($r('sys.symbol.ohos_wifi')).fontColor([Color.Green]);
  @State symbolModifier2: SymbolGlyphModifier =
    new SymbolGlyphModifier($r('sys.symbol.ohos_star')).fontColor([Color.Red]);
  @State symbolModifier3: SymbolGlyphModifier =
    new SymbolGlyphModifier($r('sys.symbol.ohos_trash')).fontColor([Color.Gray]);
  @State symbolModifier4: SymbolGlyphModifier =
    new SymbolGlyphModifier($r('sys.symbol.exposure')).fontColor([Color.Gray]);
 
 
  build() {
    Column() {
      Select([{ value: 'aaa', symbolIcon: this.symbolModifier1 },
        { value: 'bbb', symbolIcon: this.symbolModifier2 },
        { value: 'ccc', symbolIcon: this.symbolModifier3 },
        { value: 'ddd', symbolIcon: this.symbolModifier4 }])
        .selected(this.index)
        .value(this.text)
        .font({ size: 16, weight: 500 })
        .fontColor('#182431')
        .selectedOptionFont({ size: 16, weight: 400 })
        .optionFont({ size: 16, weight: 400 })
        .space(this.space)
        .arrowPosition(this.arrowPosition)
        .menuAlign(MenuAlignType.START, { dx: 0, dy: 0 })
        .onSelect((index: number, text?: string | undefined) => {
          console.info('Select:' + index)
          this.index = index;
          if (text) {
            this.text = text;
          }
        })
    }.width('100%')
  }
}

// xxx.ets

import { SymbolGlyphModifier } from '@kit.ArkUI'

@Entry

@Component

struct SelectExample {

@State text: string = "TTTTT"

@State index: number = 2

@State space: number = 8

@State arrowPosition: ArrowPosition = ArrowPosition.END

@State symbolModifier1: SymbolGlyphModifier =

new SymbolGlyphModifier($r('sys.symbol.ohos_wifi')).fontColor([Color.Green]);

@State symbolModifier2: SymbolGlyphModifier =

new SymbolGlyphModifier($r('sys.symbol.ohos_star')).fontColor([Color.Red]);

@State symbolModifier3: SymbolGlyphModifier =

new SymbolGlyphModifier($r('sys.symbol.ohos_trash')).fontColor([Color.Gray]);

@State symbolModifier4: SymbolGlyphModifier =

new SymbolGlyphModifier($r('sys.symbol.exposure')).fontColor([Color.Gray]);

build() {

Column() {

Select([{ value: 'aaa', symbolIcon: this.symbolModifier1 },

{ value: 'bbb', symbolIcon: this.symbolModifier2 },

{ value: 'ccc', symbolIcon: this.symbolModifier3 },

{ value: 'ddd', symbolIcon: this.symbolModifier4 }])

.selected(this.index)

.value(this.text)

.font({ size: 16, weight: 500 })

.fontColor('#182431')

.selectedOptionFont({ size: 16, weight: 400 })

.optionFont({ size: 16, weight: 400 })

.space(this.space)

.arrowPosition(this.arrowPosition)

.menuAlign(MenuAlignType.START, { dx: 0, dy: 0 })

.onSelect((index: number, text?: string | undefined) => {

console.info('Select:' + index)

this.index = index;

if (text) {

this.text = text;

}

})

}.width('100%')

}

示例3（自定义下拉菜单）

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

import { SymbolGlyphModifier } from '@kit.ArkUI'
 
 
class MyMenuItemContentModifier implements ContentModifier<MenuItemConfiguration> {
  modifierText: string = ""
 
 
  constructor(text: string) {
    this.modifierText = text;
  }
 
 
  applyContent(): WrappedBuilder<[MenuItemConfiguration]> {
    return wrapBuilder(MenuItemBuilder)
  }
}
 
 
@Builder
function MenuItemBuilder(configuration: MenuItemConfiguration) {
  Row() {
    Text(configuration.value)
    Blank()
    if (configuration.symbolIcon) {
      SymbolGlyph().attributeModifier(configuration.symbolIcon).fontSize(24)
    } else if (configuration.icon) {
      Image(configuration.icon).size({ width: 24, height: 24 })
    }
    Blank(30)
    Text((configuration.contentModifier as MyMenuItemContentModifier).modifierText)
    Blank(30)
    Path()
      .width('100px')
      .height('150px')
      .commands('M40 0 L80 100 L0 100 Z')
      .fillOpacity(0)
      .stroke(Color.Black)
      .strokeWidth(3)
  }
  .onClick(() => {
    configuration.triggerSelect(configuration.index, configuration.value.valueOf().toString())
  })
}
 
 
@Entry
@Component
struct SelectExample {
  @State text: string = "Content Modifier Select"
  @State symbolModifier1: SymbolGlyphModifier =
    new SymbolGlyphModifier($r('sys.symbol.ohos_trash')).fontColor([Color.Gray]);
  @State symbolModifier2: SymbolGlyphModifier =
    new SymbolGlyphModifier($r('sys.symbol.exposure')).fontColor([Color.Gray]);
 
 
  build() {
    Column() {
      Row() {
        Select([{ value: 'item1', icon: $r('app.media.icon'), symbolIcon: this.symbolModifier1 },
          { value: 'item1', icon: $r('app.media.icon'), symbolIcon: this.symbolModifier2 }])
          .value(this.text)
          .onSelect((index: number, text?: string) => {
            console.info('Select index:' + index)
            console.info('Select text:' + text)
          })
          .menuItemContentModifier(new MyMenuItemContentModifier("Content Modifier"))
 
 
      }.alignItems(VerticalAlign.Center).height('50%')
    }
  }
}

import { SymbolGlyphModifier } from '@kit.ArkUI'

class MyMenuItemContentModifier implements ContentModifier<MenuItemConfiguration> {

modifierText: string = ""

constructor(text: string) {

this.modifierText = text;

}

applyContent(): WrappedBuilder<[MenuItemConfiguration]> {

return wrapBuilder(MenuItemBuilder)

}

@Builder

function MenuItemBuilder(configuration: MenuItemConfiguration) {

Row() {

Text(configuration.value)

Blank()

if (configuration.symbolIcon) {

SymbolGlyph().attributeModifier(configuration.symbolIcon).fontSize(24)

} else if (configuration.icon) {

Image(configuration.icon).size({ width: 24, height: 24 })

}

Blank(30)

Text((configuration.contentModifier as MyMenuItemContentModifier).modifierText)

Blank(30)

Path()

.width('100px')

.height('150px')

.commands('M40 0 L80 100 L0 100 Z')

.fillOpacity(0)

.stroke(Color.Black)

.strokeWidth(3)

}

.onClick(() => {

configuration.triggerSelect(configuration.index, configuration.value.valueOf().toString())

})

}

@Entry

@Component

struct SelectExample {

@State text: string = "Content Modifier Select"

@State symbolModifier1: SymbolGlyphModifier =

new SymbolGlyphModifier($r('sys.symbol.ohos_trash')).fontColor([Color.Gray]);

@State symbolModifier2: SymbolGlyphModifier =

new SymbolGlyphModifier($r('sys.symbol.exposure')).fontColor([Color.Gray]);

build() {

Column() {

Row() {

Select([{ value: 'item1', icon: $r('app.media.icon'), symbolIcon: this.symbolModifier1 },

{ value: 'item1', icon: $r('app.media.icon'), symbolIcon: this.symbolModifier2 }])

.value(this.text)

.onSelect((index: number, text?: string) => {

console.info('Select index:' + index)

console.info('Select text:' + text)

})

.menuItemContentModifier(new MyMenuItemContentModifier("Content Modifier"))

}.alignItems(VerticalAlign.Center).height('50%')

}

示例4（设置分割线样式）

该示例通过配置divider的DividerOptions类型实现分割线样式的下拉菜单

// xxx.ets
@Entry
@Component
struct SelectExample {
  @State text: string = "TTTTT"
  @State index: number = -1
  @State arrowPosition: ArrowPosition = ArrowPosition.END
 
 
  build() {
    Column() {
      Select([{ value: 'aaa', icon: $r("app.media.icon") },
        { value: 'bbb', icon: $r("app.media.icon") },
        { value: 'ccc', icon: $r("app.media.icon") },
        { value: 'ddd', icon: $r("app.media.icon") }])
        .selected(this.index)
        .value(this.text)
        .font({ size: 16, weight: 500 })
        .fontColor('#182431')
        .selectedOptionFont({ size: 16, weight: 400 })
        .optionFont({ size: 16, weight: 400 })
        .arrowPosition(this.arrowPosition)
        .menuAlign(MenuAlignType.START, { dx: 0, dy: 0 })
        .optionWidth(200)
        .optionHeight(300)
        .divider({
          strokeWidth: 5,
          color: Color.Blue,
          startMargin: 10,
          endMargin: 10
        })
        .onSelect((index: number, text?: string | undefined) => {
          console.info('Select:' + index)
          this.index = index;
          if (text) {
            this.text = text;
          }
        })
    }.width('100%')
  }
}

// xxx.ets

@Entry

@Component

struct SelectExample {

@State text: string = "TTTTT"

@State index: number = -1

@State arrowPosition: ArrowPosition = ArrowPosition.END

build() {

Column() {

Select([{ value: 'aaa', icon: $r("app.media.icon") },

{ value: 'bbb', icon: $r("app.media.icon") },

{ value: 'ccc', icon: $r("app.media.icon") },

{ value: 'ddd', icon: $r("app.media.icon") }])

.selected(this.index)

.value(this.text)

.font({ size: 16, weight: 500 })

.fontColor('#182431')

.selectedOptionFont({ size: 16, weight: 400 })

.optionFont({ size: 16, weight: 400 })

.arrowPosition(this.arrowPosition)

.menuAlign(MenuAlignType.START, { dx: 0, dy: 0 })

.optionWidth(200)

.optionHeight(300)

.divider({

strokeWidth: 5,

color: Color.Blue,

startMargin: 10,

endMargin: 10

})

.onSelect((index: number, text?: string | undefined) => {

console.info('Select:' + index)

this.index = index;

if (text) {

this.text = text;

}

})

}.width('100%')

}

示例5（设置无分割线样式）

该示例通过配置divider为null实现无分割线样式的下拉菜单

// xxx.ets
@Entry
@Component
struct SelectExample {
  @State text: string = "TTTTT"
  @State index: number = -1
  @State arrowPosition: ArrowPosition = ArrowPosition.END
 
 
  build() {
    Column() {
      Select([{ value: 'aaa', icon: $r("app.media.icon") },
        { value: 'bbb', icon: $r("app.media.icon") },
        { value: 'ccc', icon: $r("app.media.icon") },
        { value: 'ddd', icon: $r("app.media.icon") }])
        .selected(this.index)
        .value(this.text)
        .font({ size: 16, weight: 500 })
        .fontColor('#182431')
        .selectedOptionFont({ size: 16, weight: 400 })
        .optionFont({ size: 16, weight: 400 })
        .arrowPosition(this.arrowPosition)
        .menuAlign(MenuAlignType.START, { dx: 0, dy: 0 })
        .optionWidth(200)
        .optionHeight(300)
        .divider(null)
        .onSelect((index: number, text?: string | undefined) => {
          console.info('Select:' + index)
          this.index = index;
          if (text) {
            this.text = text;
          }
        })
    }.width('100%')
  }
}

// xxx.ets

@Entry

@Component

struct SelectExample {

@State text: string = "TTTTT"

@State index: number = -1

@State arrowPosition: ArrowPosition = ArrowPosition.END

build() {

Column() {

Select([{ value: 'aaa', icon: $r("app.media.icon") },

{ value: 'bbb', icon: $r("app.media.icon") },

{ value: 'ccc', icon: $r("app.media.icon") },

{ value: 'ddd', icon: $r("app.media.icon") }])

.selected(this.index)

.value(this.text)

.font({ size: 16, weight: 500 })

.fontColor('#182431')

.selectedOptionFont({ size: 16, weight: 400 })

.optionFont({ size: 16, weight: 400 })

.arrowPosition(this.arrowPosition)

.menuAlign(MenuAlignType.START, { dx: 0, dy: 0 })

.optionWidth(200)

.optionHeight(300)

.divider(null)

.onSelect((index: number, text?: string | undefined) => {

console.info('Select:' + index)

this.index = index;

if (text) {

this.text = text;

}

})

}.width('100%')

}

系列教程 · 2025年7月16日

Select

子组件

接口

SelectOption对象说明

属性

selected

value

controlSize12+

menuItemContentModifier12+

divider12+

font

fontColor

selectedOptionBgColor

selectedOptionFont

selectedOptionFontColor

optionBgColor

optionFont

optionFontColor

space10+

arrowPosition10+

menuAlign10+

optionWidth11+

optionHeight11+

menuBackgroundColor11+

menuBackgroundBlurStyle11+

ArrowPosition10+枚举说明

MenuAlignType10+枚举说明

MenuItemConfiguration12+对象说明

事件

onSelect

示例1（设置下拉菜单）

示例2（设置symbol类型图标）

示例3（自定义下拉菜单）

示例4（设置分割线样式）

示例5（设置无分割线样式）

您可能还喜欢...

iOS中tab bar图标、APP 图标等各种图标的尺寸标准

复旦微FM33系列MCU唯一ID（UID）读取方法

PHP异步执行