1# Select 2 3提供下拉选择菜单，可以让用户在多个选项之间选择。 4 5> **说明：** 6> 7> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9## 子组件 10 11无 12 13## 接口 14 15Select(options: Array\<[SelectOption](#selectoption对象说明)\>) 16 17**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 18 19**系统能力：** SystemCapability.ArkUI.ArkUI.Full 20 21**参数：** 22 23| 参数名 | 类型 | 必填 | 说明 | 24| ------- | ---------------------------------------------- | ---- | -------------- | 25| options | Array\<[SelectOption](#selectoption对象说明)\> | 是 | 设置下拉选项。 | 26 27## SelectOption对象说明 28 29**系统能力：** SystemCapability.ArkUI.ArkUI.Full 30 31| 名称 | 类型 | 必填 | 说明 | 32| ------ | ----------------------------------- | ---- | -------------- | 33| value | [ResourceStr](ts-types.md#resourcestr) | 是 | 下拉选项内容。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 34| icon | [ResourceStr](ts-types.md#resourcestr) | 否 | 下拉选项图片。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 35| symbolIcon<sup>12+</sup> | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | 否 | 下拉选项Symbol图片。<br/>symbolIcon优先级高于icon。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。| 36 37## 属性 38 39除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： 40 41### selected 42 43selected(value: number | Resource) 44 45设置下拉菜单初始选项的索引，第一项的索引为0。当不设置selected属性或设置异常值时，默认选择值为-1，菜单项不选中；当设置为undefined、null时，选中第一项。 46 47从API version 10开始，该属性支持[$$](../../../quick-start/arkts-two-way-sync.md)双向绑定变量。 48 49**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 50 51**系统能力：** SystemCapability.ArkUI.ArkUI.Full 52 53**参数：** 54 55| 参数名 | 类型 | 必填 | 说明 | 56| ------ | ------------------------------------------------------------ | ---- | ------------------------ | 57| value | number \| [Resource](ts-types.md#resource)<sup>11+</sup> | 是 | 下拉菜单初始选项的索引。 | 58 59### value 60 61value(value: ResourceStr) 62 63设置下拉按钮本身的文本内容。当菜单选中时默认会替换为菜单项文本内容。 64 65从API version 10开始，该参数支持[$$](../../../quick-start/arkts-two-way-sync.md)双向绑定变量。 66 67**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 68 69**系统能力：** SystemCapability.ArkUI.ArkUI.Full 70 71**参数：** 72 73| 参数名 | 类型 | 必填 | 说明 | 74| ------ | ---------------------------------------------------- | ---- | ------------------------ | 75| value | [ResourceStr](ts-types.md#resourcestr)<sup>11+</sup> | 是 | 下拉按钮本身的文本内容。 | 76 77### controlSize<sup>12+</sup> 78 79controlSize(value: ControlSize) 80 81设置Select组件的尺寸。 82 83**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 84 85**系统能力：** SystemCapability.ArkUI.ArkUI.Full 86 87**参数：** 88 89| 参数名 | 类型 | 必填 | 说明 | 90| ------ | --------------------------------------------- | ---- | ------------------------------------------------ | 91| value | [ControlSize](ts-basic-components-button.md#controlsize11枚举说明)<sup>11+</sup> | 是 | Select组件的尺寸。<br/>默认值:ControlSize.NORMAL | 92 93controlSize、width、height接口作用优先级： 94 95 1）如果开发者只设置了width和height，当文字大小设置的是比较大的值的时候，文字超出组件大小，且以省略号方式显示； 96 97 2）如果开发者只设置了controlSize，没有设置width和height，组件宽高自适应文字，文字不超出组件，并设置最小宽度minWidth和最小高度minHeight； 98 99 3）如果controlSize、width、height接口都设置了，width和height设置的值生效，但如果width和height设置的值小于controlSize设置的最小宽度minWidth和最小高度minHeight，width和height设置的值不生效，宽高仍保持controlSize设置的最小宽度minWidth和最小高度minHeight。 100 101### menuItemContentModifier<sup>12+</sup> 102 103menuItemContentModifier(modifier: ContentModifier\<MenuItemConfiguration>) 104 105定制Select下拉菜单项内容区的方法。 106 107**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 108 109**系统能力：** SystemCapability.ArkUI.ArkUI.Full 110 111**参数：** 112 113| 参数名 | 类型 | 必填 | 说明 | 114| ------ | --------------------------------------------- | ---- | ------------------------------------------------ | 115| modifier | [ContentModifier\<MenuItemConfiguration>](#menuitemconfiguration12对象说明) | 是 | 在Select组件上，定制下拉菜单项内容区的方法。<br/>modifier: 内容修改器，开发者需要自定义class实现ContentModifier接口。 | 116 117### divider<sup>12+</sup> 118 119divider(options: Optional\<DividerOptions> | null) 120 121设置分割线样式，不设置该属性则按“默认值”展示分割线。 122 123**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 124 125**系统能力：** SystemCapability.ArkUI.ArkUI.Full 126 127**参数：** 128| 参数名 | 类型 | 必填 | 说明 | 129| ------ | ------- | ---- | --------------------------------------------------------------------- | 130| options | Optional\<[DividerOptions](ts-basic-components-textpicker.md#divideroptions12对象说明)> \| null | 是 | 1.设置DividerOptions，则按设置的样式显示分割线。<br/>默认值：<br/>{<br/>strokeWidth: '1px' , <br/>color: '#33182431'<br/>}<br/>2.设置为null时，不显示分割线。<br/>3.strokeWidth设置过宽时，会覆盖文字。分割线会从每一个Item底部开始，同时向上向下画分割线。<br/>4.startMargin和endMargin的默认值与不设置divider属性时的分割线样式保持一致。startMargin和endMargin的和与optionWidth的值相等时，不显示分割线。 startMargin和endMargin的和超过optionWidth的值时，按照默认样式显示分割线。| 131 132### font 133 134font(value: Font) 135 136设置下拉按钮本身的文本样式。当size为0的时候，文本不显示，当size为负值的时候，文本的size按照默认值显示。 137 138**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 139 140**系统能力：** SystemCapability.ArkUI.ArkUI.Full 141 142**参数：** 143 144| 参数名 | 类型 | 必填 | 说明 | 145| ------ | ------------------------ | ---- | ------------------------------------------------------------ | 146| value | [Font](ts-types.md#font) | 是 | 下拉按钮本身的文本样式。<br/>API Version 11及以前默认值：<br/>{<br/>size: `$r('sys.float.ohos_id_text_size_button1')`,<br/>weight: FontWeight.Medium<br/>} <br/>API Version 12以后，如果设置controlSize的值为：controlSize.SMALL，size默认值是`$r('sys.float.ohos_id_text_size_button2')`，否则为`$r('sys.float.ohos_id_text_size_button1')`。 | 147 148### fontColor 149 150fontColor(value: ResourceColor) 151 152设置下拉按钮本身的文本颜色。 153 154**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 155 156**系统能力：** SystemCapability.ArkUI.ArkUI.Full 157 158**参数：** 159 160| 参数名 | 类型 | 必填 | 说明 | 161| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ | 162| value | [ResourceColor](ts-types.md#resourcecolor) | 是 | 下拉按钮本身的文本颜色。<br/>默认值：`$r('sys.color.ohos_id_color_text_primary')`混合`$r('sys.color.ohos_id_alpha_content_primary')`的透明度。 | 163 164### selectedOptionBgColor 165 166selectedOptionBgColor(value: ResourceColor) 167 168设置下拉菜单选中项的背景色。 169 170**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 171 172**系统能力：** SystemCapability.ArkUI.ArkUI.Full 173 174**参数：** 175 176| 参数名 | 类型 | 必填 | 说明 | 177| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ | 178| value | [ResourceColor](ts-types.md#resourcecolor) | 是 | 下拉菜单选中项的背景色。<br/>默认值：`$r('sys.color.ohos_id_color_component_activated')`混合`$r('sys.color.ohos_id_alpha_highlight_bg')`的透明度。 | 179 180### selectedOptionFont 181 182selectedOptionFont(value: Font) 183 184设置下拉菜单选中项的文本样式。当size为0的时候，文本不显示，当size为负值的时候，文本的size按照默认值显示。 185 186**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 187 188**系统能力：** SystemCapability.ArkUI.ArkUI.Full 189 190**参数：** 191 192| 参数名 | 类型 | 必填 | 说明 | 193| ------ | ------------------------ | ---- | ------------------------------------------------------------ | 194| value | [Font](ts-types.md#font) | 是 | 下拉菜单选中项的文本样式。<br/>默认值：<br/>{<br/>size: $r('sys.color.ohos_id_text_size_body1'),<br/>weight: FontWeight.Regular<br/>} | 195 196### selectedOptionFontColor 197 198selectedOptionFontColor(value: ResourceColor) 199 200设置下拉菜单选中项的文本颜色。 201 202**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 203 204**系统能力：** SystemCapability.ArkUI.ArkUI.Full 205 206**参数：** 207 208| 参数名 | 类型 | 必填 | 说明 | 209| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ | 210| value | [ResourceColor](ts-types.md#resourcecolor) | 是 | 下拉菜单选中项的文本颜色。<br/>默认值：$r('sys.color.ohos_id_color_text_primary_activated') | 211 212### optionBgColor 213 214optionBgColor(value: ResourceColor) 215 216设置下拉菜单项的背景色。 217 218**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 219 220**系统能力：** SystemCapability.ArkUI.ArkUI.Full 221 222**参数：** 223 224| 参数名 | 类型 | 必填 | 说明 | 225| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ | 226| value | [ResourceColor](ts-types.md#resourcecolor) | 是 | 下拉菜单项的背景色。<br/>默认值：<br/>API version 11之前，默认值为Color.White。<br/>API version 11及之后，默认值为Color.Transparent。 | 227 228### optionFont 229 230optionFont(value: Font) 231 232设置下拉菜单项的文本样式。当size为0的时候，文本不显示，当size为负值的时候，文本的size按照默认值显示。 233 234**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 235 236**系统能力：** SystemCapability.ArkUI.ArkUI.Full 237 238**参数：** 239 240| 参数名 | 类型 | 必填 | 说明 | 241| ------ | ------------------------ | ---- | ------------------------------------------------------------ | 242| value | [Font](ts-types.md#font) | 是 | 下拉菜单项的文本样式。<br/>默认值：<br/>{<br/>size: $r('sys.float.ohos_id_text_size_body1'),<br/>weight: FontWeight.Regular<br/>} | 243 244### optionFontColor 245 246optionFontColor(value: ResourceColor) 247 248设置下拉菜单项的文本颜色。 249 250**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 251 252**系统能力：** SystemCapability.ArkUI.ArkUI.Full 253 254**参数：** 255 256| 参数名 | 类型 | 必填 | 说明 | 257| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ | 258| value | [ResourceColor](ts-types.md#resourcecolor) | 是 | 下拉菜单项的文本颜色。<br/>默认值：$r('sys.color.ohos_id_color_text_primary') | 259 260### space<sup>10+</sup> 261 262space(value: Length) 263 264设置下拉菜单项的文本与箭头之间的间距。不支持设置百分比。设置为null、undefined，或者小于等于8的值，取默认值。 265 266**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 267 268**系统能力：** SystemCapability.ArkUI.ArkUI.Full 269 270**参数：** 271 272| 参数名 | 类型 | 必填 | 说明 | 273| ------ | ---------------------------- | ---- | ------------------------------------------------ | 274| value | [Length](ts-types.md#length) | 是 | 下拉菜单项的文本与箭头之间的间距。<br/>默认值：8 | 275 276### arrowPosition<sup>10+</sup> 277 278arrowPosition(value: ArrowPosition) 279 280设置下拉菜单项的文本与箭头之间的对齐方式。 281 282**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 283 284**系统能力：** SystemCapability.ArkUI.ArkUI.Full 285 286**参数：** 287 288| 参数名 | 类型 | 必填 | 说明 | 289| ------ | ----------------------------------------- | ---- | ------------------------------------------------------------ | 290| value | [ArrowPosition](#arrowposition10枚举说明) | 是 | 下拉菜单项的文本与箭头之间的对齐方式。<br/>默认值：ArrowPosition.END | 291 292### menuAlign<sup>10+</sup> 293 294menuAlign(alignType: MenuAlignType, offset?: Offset) 295 296设置下拉按钮与下拉菜单间的对齐方式。 297 298**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 299 300**系统能力：** SystemCapability.ArkUI.ArkUI.Full 301 302**参数：** 303 304| 参数名 | 类型 | 必填 | 说明 | 305| --------- | ----------------------------------------- | ---- | ------------------------------------------------------------ | 306| alignType | [MenuAlignType](#menualigntype10枚举说明) | 是 | 对齐方式类型。<br/>默认值：MenuAlignType.START | 307| offset | [Offset](ts-types.md#offset) | 否 | 按照对齐类型对齐后，下拉菜单相对下拉按钮的偏移量。<br/> 默认值：{dx: 0, dy: 0} | 308 309### optionWidth<sup>11+</sup> 310 311optionWidth(value: Dimension | OptionWidthMode ) 312 313设置下拉菜单项的宽度，不支持设置百分比。OptionWidthMode类型为枚举类型，OptionWidthMode决定下拉菜单是否继承下拉按钮宽度。 314 315当设置为异常值或小于最小宽度56vp时，属性不生效，菜单项宽度设为默认值，即菜单默认宽度为2栅格。 316 317**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 318 319**系统能力：** SystemCapability.ArkUI.ArkUI.Full 320 321**参数：** 322 323| 参数名 | 类型 | 必填 | 说明 | 324| ------ | ------------------------------------------------------------ | ---- | ------------------ | 325| value | [Dimension](ts-types.md#dimension10) \| [OptionWidthMode](ts-appendix-enums.md#optionwidthmode11) | 是 | 下拉菜单项的宽度。 | 326 327### optionHeight<sup>11+</sup> 328 329optionHeight(value: Dimension) 330 331设置下拉菜单显示的最大高度，不支持设置百分比。下拉菜单的默认最大高度是屏幕可用高度的80%，设置的菜单最大高度不能超过默认最大高度。 332 333当设置为异常值或零时，属性不生效，下拉菜单最大高度设为默认值，即下拉菜单最大高度默认值为屏幕可用高度的80%。 334 335如果下拉菜单所有选项的实际高度没有设定的高度大，下拉菜单的高度按实际高度显示。 336 337**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 338 339**系统能力：** SystemCapability.ArkUI.ArkUI.Full 340 341**参数：** 342 343| 参数名 | 类型 | 必填 | 说明 | 344| ------ | ------------------------------------ | ---- | ------------------------ | 345| value | [Dimension](ts-types.md#dimension10) | 是 | 下拉菜单显示的最大高度。 | 346 347### menuBackgroundColor<sup>11+</sup> 348 349menuBackgroundColor(value: ResourceColor) 350 351设置下拉菜单的背景色。 352 353**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 354 355**系统能力：** SystemCapability.ArkUI.ArkUI.Full 356 357**参数：** 358 359| 参数名 | 类型 | 必填 | 说明 | 360| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ | 361| value | [ResourceColor](ts-types.md#resourcecolor) | 是 | 下拉菜单的背景色。<br/>默认值：<br/>API version 11之前，默认值为$r('sys.color.ohos_id_color_card_bg')。<br/>API version 11及之后，默认值为Color.Transparent。 | 362 363### menuBackgroundBlurStyle<sup>11+</sup> 364 365menuBackgroundBlurStyle(value: BlurStyle) 366 367设置下拉菜单的背景模糊材质。 368 369**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 370 371**系统能力：** SystemCapability.ArkUI.ArkUI.Full 372 373**参数：** 374 375| 参数名 | 类型 | 必填 | 说明 | 376| ------ | -------------------------------------------- | ---- | ------------------------------------------------------------ | 377| value | [BlurStyle](ts-universal-attributes-background.md#blurstyle9) | 是 | 下拉菜单的背景模糊材质。<br/>默认值：BlurStyle.COMPONENT_ULTRA_THICK | 378 379## ArrowPosition<sup>10+</sup>枚举说明 380 381**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 382 383**系统能力：** SystemCapability.ArkUI.ArkUI.Full 384 385| 名称 | 说明 | 386| ------------------- | ------------------ | 387| END<sup>10+</sup> | 文字在前，箭头在后。 | 388| START<sup>10+</sup> | 箭头在前，文字在后。 | 389 390## MenuAlignType<sup>10+</sup>枚举说明 391 392**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 393 394**系统能力：** SystemCapability.ArkUI.ArkUI.Full 395 396| 名称 | 说明 | 397| ------------------- | ------------------ | 398| START | 按照语言方向起始端对齐。 | 399| CENTER | 居中对齐。 | 400| END | 按照语言方向末端对齐。 | 401 402## MenuItemConfiguration<sup>12+</sup>对象说明 403 404**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 405 406**系统能力：** SystemCapability.ArkUI.ArkUI.Full 407 408| 名称 | 类型 | 必填 | 说明 | 409| ------ | -------------------------------------------- | ---- | ------------------------------------------------------------ | 410| value | [ResourceStr](ts-types.md#resourcestr) | 是 | 下拉菜单项的文本内容。 | 411| icon | [ResourceStr](ts-types.md#resourcestr) | 否 | 下拉菜单项的图片内容。 | 412| symbolIcon<sup>12+</sup> | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | 否 | 下拉选项Symbol图片内容。| 413| selected | boolean | 是 | 下拉菜单项是否被选中。<br/>默认值：false | 414| index | number | 是 | 下拉菜单项的索引。 | 415| triggerSelect | (index: number, value: string) :void | 是 | 下拉菜单选中某一项的回调函数。<br/>index: 选中菜单项的索引。<br/>value: 选中菜单项的文本。<br/>说明: index会赋值给事件[onSelect](#onselect)回调中的索引参数； value会返回给Select组件显示，同时会赋值给事件[onSelect](#onselect)回调中的文本参数。 | 416 417## 事件 418 419### onSelect 420 421onSelect(callback: (index: number, value: string) => void) 422 423下拉菜单选中某一项的回调。 424 425**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 426 427**系统能力：** SystemCapability.ArkUI.ArkUI.Full 428 429**参数：** 430 431| 参数名 | 类型 | 必填 | 说明 | 432| ------ | ------ | ---- | -------------- | 433| index | number | 是 | 选中项的索引。 | 434| value | string | 是 | 选中项的值。 | 435 436## 示例1（设置下拉菜单） 437 438该示例通过配置SelectOptions实现下拉菜单。 439 440```ts 441// xxx.ets 442@Entry 443@Component 444struct SelectExample { 445 @State text: string = "TTTTT" 446 @State index: number = 2 447 @State space: number = 8 448 @State arrowPosition: ArrowPosition = ArrowPosition.END 449 build() { 450 Column() { 451 Select([{ value: 'aaa', icon: $r("app.media.selection") }, 452 { value: 'bbb', icon: $r("app.media.selection") }, 453 { value: 'ccc', icon: $r("app.media.selection") }, 454 { value: 'ddd', icon: $r("app.media.selection") }]) 455 .selected(this.index) 456 .value(this.text) 457 .font({ size: 16, weight: 500 }) 458 .fontColor('#182431') 459 .selectedOptionFont({ size: 16, weight: 400 }) 460 .optionFont({ size: 16, weight: 400 }) 461 .space(this.space) 462 .arrowPosition(this.arrowPosition) 463 .menuAlign(MenuAlignType.START, {dx:0, dy:0}) 464 .optionWidth(200) 465 .optionHeight(300) 466 .onSelect((index:number, text?: string | undefined)=>{ 467 console.info('Select:' + index) 468 this.index = index; 469 if(text){ 470 this.text = text; 471 } 472 }) 473 }.width('100%') 474 } 475} 476``` 477 478 479 480 481 482## 示例2（设置symbol类型图标） 483该示例实现了一个下拉菜单中图片为Symbol的Select组件。 484 485```ts 486// xxx.ets 487import { SymbolGlyphModifier } from '@kit.ArkUI' 488 489@Entry 490@Component 491struct SelectExample { 492 @State text: string = "TTTTT" 493 @State index: number = 2 494 @State space: number = 8 495 @State arrowPosition: ArrowPosition = ArrowPosition.END 496 @State symbolModifier1: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_wifi')).fontColor([Color.Green]); 497 @State symbolModifier2: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_star')).fontColor([Color.Red]); 498 @State symbolModifier3: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_trash')).fontColor([Color.Gray]); 499 @State symbolModifier4: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.exposure')).fontColor([Color.Gray]); 500 build() { 501 Column() { 502 Select([{ value: 'aaa', symbolIcon: this.symbolModifier1 }, 503 { value: 'bbb', symbolIcon: this.symbolModifier2 }, 504 { value: 'ccc', symbolIcon: this.symbolModifier3 }, 505 { value: 'ddd', symbolIcon: this.symbolModifier4 }]) 506 .selected(this.index) 507 .value(this.text) 508 .font({ size: 16, weight: 500 }) 509 .fontColor('#182431') 510 .selectedOptionFont({ size: 16, weight: 400 }) 511 .optionFont({ size: 16, weight: 400 }) 512 .space(this.space) 513 .arrowPosition(this.arrowPosition) 514 .menuAlign(MenuAlignType.START, {dx:0, dy:0}) 515 .onSelect((index:number, text?: string | undefined)=>{ 516 console.info('Select:' + index) 517 this.index = index; 518 if(text){ 519 this.text = text; 520 } 521 }) 522 }.width('100%') 523 } 524} 525``` 526 527 528 529## 示例3（自定义下拉菜单） 530该示例实现了一个自定义下拉菜选项的Select组件。自定义下拉菜单选项样式为“文本 + Symbol图片 + 空白间隔 + 文本 + 绘制三角形”，点击菜单选项后Select组件显示菜单选项的文本内容。 531 532```ts 533import { MenuItemModifier, SymbolGlyphModifier } from '@kit.ArkUI' 534 535class MyMenuItemContentModifier implements ContentModifier<MenuItemConfiguration> { 536 modifierText: string = "" 537 constructor(text: string) { 538 this.modifierText = text; 539 } 540 applyContent(): WrappedBuilder<[MenuItemConfiguration]> { 541 return wrapBuilder(MenuItemBuilder) 542 } 543} 544 545@Builder 546function MenuItemBuilder(configuration: MenuItemConfiguration) { 547 Row() { 548 Text(configuration.value) 549 Blank() 550 if (configuration.symbolIcon) { 551 SymbolGlyph().attributeModifier(configuration.symbolIcon).fontSize(24) 552 } else if (configuration.icon) { 553 Image(configuration.icon).size({ width: 24, height: 24 }) 554 } 555 Blank(30) 556 Text((configuration.contentModifier as MyMenuItemContentModifier).modifierText) 557 Blank(30) 558 Path() 559 .width('100px') 560 .height('150px') 561 .commands('M40 0 L80 100 L0 100 Z') 562 .fillOpacity(0) 563 .stroke(Color.Black) 564 .strokeWidth(3) 565 } 566 .onClick(() => { 567 configuration.triggerSelect(configuration.index, configuration.value.valueOf().toString()) 568 }) 569} 570 571@Entry 572@Component 573struct SelectExample { 574 @State text: string = "Content Modifier Select" 575 @State symbolModifier1: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_trash')).fontColor([Color.Gray]); 576 @State symbolModifier2: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.exposure')).fontColor([Color.Gray]); 577 build() { 578 Column() { 579 Row() { 580 Select([{ value: 'item1', icon: $r('app.media.icon'), symbolIcon: this.symbolModifier1 }, 581 { value: 'item1', icon: $r('app.media.icon'), symbolIcon: this.symbolModifier2 }]) 582 .value(this.text) 583 .onSelect((index:number, text?: string)=>{ 584 console.info('Select index:' + index) 585 console.info('Select text:' + text) 586 }) 587 .menuItemContentModifier(new MyMenuItemContentModifier("Content Modifier")) 588 589 }.alignItems(VerticalAlign.Center).height('50%') 590 } 591 } 592} 593``` 594 595 596## 示例4（设置分割线样式） 597该示例通过配置divider的DividerOptions类型实现分割线样式的下拉菜单。 598 599```ts 600// xxx.ets 601@Entry 602@Component 603struct SelectExample { 604 @State text: string = "TTTTT" 605 @State index: number = -1 606 @State arrowPosition: ArrowPosition = ArrowPosition.END 607 build() { 608 Column() { 609 Select([{ value: 'aaa', icon: $r("app.media.icon") }, 610 { value: 'bbb', icon: $r("app.media.icon") }, 611 { value: 'ccc', icon: $r("app.media.icon") }, 612 { value: 'ddd', icon: $r("app.media.icon") }]) 613 .selected(this.index) 614 .value(this.text) 615 .font({ size: 16, weight: 500 }) 616 .fontColor('#182431') 617 .selectedOptionFont({ size: 16, weight: 400 }) 618 .optionFont({ size: 16, weight: 400 }) 619 .arrowPosition(this.arrowPosition) 620 .menuAlign(MenuAlignType.START, {dx:0, dy:0}) 621 .optionWidth(200) 622 .optionHeight(300) 623 .divider( { strokeWidth: 5, color: Color.Blue, startMargin: 10, endMargin: 10 }) 624 .onSelect((index:number, text?: string | undefined)=>{ 625 console.info('Select:' + index) 626 this.index = index; 627 if(text){ 628 this.text = text; 629 } 630 }) 631 }.width('100%') 632 } 633} 634``` 635 636 637## 示例5（设置无分割线样式） 638该示例通过配置divider为null实现无分割线样式的下拉菜单。 639 640```ts 641// xxx.ets 642@Entry 643@Component 644struct SelectExample { 645 @State text: string = "TTTTT" 646 @State index: number = -1 647 @State arrowPosition: ArrowPosition = ArrowPosition.END 648 build() { 649 Column() { 650 Select([{ value: 'aaa', icon: $r("app.media.icon") }, 651 { value: 'bbb', icon: $r("app.media.icon") }, 652 { value: 'ccc', icon: $r("app.media.icon") }, 653 { value: 'ddd', icon: $r("app.media.icon") }]) 654 .selected(this.index) 655 .value(this.text) 656 .font({ size: 16, weight: 500 }) 657 .fontColor('#182431') 658 .selectedOptionFont({ size: 16, weight: 400 }) 659 .optionFont({ size: 16, weight: 400 }) 660 .arrowPosition(this.arrowPosition) 661 .menuAlign(MenuAlignType.START, {dx:0, dy:0}) 662 .optionWidth(200) 663 .optionHeight(300) 664 .divider( null ) 665 .onSelect((index:number, text?: string | undefined)=>{ 666 console.info('Select:' + index) 667 this.index = index; 668 if(text){ 669 this.text = text; 670 } 671 }) 672 }.width('100%') 673 } 674} 675``` 676 677
