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```ts 439// xxx.ets 440@Entry 441@Component 442struct SelectExample { 443 @State text: string = "TTTTT" 444 @State index: number = 2 445 @State space: number = 8 446 @State arrowPosition: ArrowPosition = ArrowPosition.END 447 build() { 448 Column() { 449 Select([{ value: 'aaa', icon: $r("app.media.selection") }, 450 { value: 'bbb', icon: $r("app.media.selection") }, 451 { value: 'ccc', icon: $r("app.media.selection") }, 452 { value: 'ddd', icon: $r("app.media.selection") }]) 453 .selected(this.index) 454 .value(this.text) 455 .font({ size: 16, weight: 500 }) 456 .fontColor('#182431') 457 .selectedOptionFont({ size: 16, weight: 400 }) 458 .optionFont({ size: 16, weight: 400 }) 459 .space(this.space) 460 .arrowPosition(this.arrowPosition) 461 .menuAlign(MenuAlignType.START, {dx:0, dy:0}) 462 .optionWidth(200) 463 .optionHeight(300) 464 .onSelect((index:number, text?: string | undefined)=>{ 465 console.info('Select:' + index) 466 this.index = index; 467 if(text){ 468 this.text = text; 469 } 470 }) 471 }.width('100%') 472 } 473} 474``` 475 476 477 478## 示例2 479该示例实现了一个自定义下拉菜选项的Select组件。自定义下拉菜单选项样式为“文本 + 图片 + 空白间隔 + 文本 + 绘制三角形”，点击菜单选项后Select组件显示菜单选项的文本内容。 480 481```ts 482import { MenuItemModifier } from '@kit.ArkUI' 483 484class MyMenuItemContentModifier implements ContentModifier<MenuItemConfiguration> { 485 modifierText: string = "" 486 constructor(text: string) { 487 this.modifierText = text; 488 } 489 applyContent(): WrappedBuilder<[MenuItemConfiguration]> { 490 return wrapBuilder(MenuItemBuilder) 491 } 492} 493 494@Builder 495function MenuItemBuilder(configuration: MenuItemConfiguration) { 496 Row() { 497 Text(configuration.value) 498 Blank() 499 Image(configuration.icon).size({ width: 40, height: 40 }) 500 Blank(30) 501 Text((configuration.contentModifier as MyMenuItemContentModifier).modifierText) 502 Path() 503 .width('100px') 504 .height('150px') 505 .commands('M40 0 L80 100 L0 100 Z') 506 .fillOpacity(0) 507 .stroke(Color.Black) 508 .strokeWidth(3) 509 } 510 .onClick(() => { 511 configuration.triggerSelect(configuration.index, configuration.value.valueOf().toString()) 512 }) 513} 514 515@Entry 516@Component 517struct SelectExample { 518 @State text: string = "有modifier" 519 build() { 520 Column() { 521 Row() { 522 Select([{ value: 'item1', icon: $r("app.media.icon") }, 523 { value: 'item2', icon: $r("app.media.icon") }]) 524 .value(this.text) 525 .onSelect((index:number, text?: string)=>{ 526 console.info('Select index:' + index) 527 console.info('Select text:' + text) 528 }) 529 .menuItemContentModifier(new MyMenuItemContentModifier("我来自Modifier")) 530 531 }.alignItems(VerticalAlign.Center).height("50%") 532 } 533 } 534} 535``` 536 537 538## 示例3 539该示例实现了一个下拉菜单中图片为Symbol的Select组件。 540 541```ts 542// xxx.ets 543import { SymbolGlyphModifier } from '@kit.ArkUI' 544 545@Entry 546@Component 547struct SelectExample { 548 @State text: string = "TTTTT" 549 @State index: number = 2 550 @State space: number = 8 551 @State arrowPosition: ArrowPosition = ArrowPosition.END 552 @State symbolModifier1: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_wifi')).fontColor([Color.Green]); 553 @State symbolModifier2: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_star')).fontColor([Color.Red]); 554 @State symbolModifier3: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_trash')).fontColor([Color.Gray]); 555 @State symbolModifier4: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.exposure')).fontColor([Color.Gray]); 556 build() { 557 Column() { 558 Select([{ value: 'aaa', symbolIcon: this.symbolModifier1 }, 559 { value: 'bbb', symbolIcon: this.symbolModifier2 }, 560 { value: 'ccc', symbolIcon: this.symbolModifier3 }, 561 { value: 'ddd', symbolIcon: this.symbolModifier4 }]) 562 .selected(this.index) 563 .value(this.text) 564 .font({ size: 16, weight: 500 }) 565 .fontColor('#182431') 566 .selectedOptionFont({ size: 16, weight: 400 }) 567 .optionFont({ size: 16, weight: 400 }) 568 .space(this.space) 569 .arrowPosition(this.arrowPosition) 570 .menuAlign(MenuAlignType.START, {dx:0, dy:0}) 571 .onSelect((index:number, text?: string | undefined)=>{ 572 console.info('Select:' + index) 573 this.index = index; 574 if(text){ 575 this.text = text; 576 } 577 }) 578 }.width('100%') 579 } 580} 581``` 582 583 584 585## 示例4 586该示例实现了一个自定义下拉菜选项的Select组件。自定义下拉菜单选项样式为“文本 + Symbol图片 + 空白间隔 + 文本 + 绘制三角形”，点击菜单选项后Select组件显示菜单选项的文本内容。 587 588```ts 589import { MenuItemModifier, SymbolGlyphModifier } from '@kit.ArkUI' 590 591class MyMenuItemContentModifier implements ContentModifier<MenuItemConfiguration> { 592 modifierText: string = "" 593 constructor(text: string) { 594 this.modifierText = text; 595 } 596 applyContent(): WrappedBuilder<[MenuItemConfiguration]> { 597 return wrapBuilder(MenuItemBuilder) 598 } 599} 600 601@Builder 602function MenuItemBuilder(configuration: MenuItemConfiguration) { 603 Row() { 604 Text(configuration.value) 605 Blank() 606 if (configuration.symbolIcon) { 607 SymbolGlyph().attributeModifier(configuration.symbolIcon).fontSize(24) 608 } else if (configuration.icon) { 609 Image(configuration.icon).size({ width: 24, height: 24 }) 610 } 611 Blank(30) 612 Text((configuration.contentModifier as MyMenuItemContentModifier).modifierText) 613 Blank(30) 614 Path() 615 .width('100px') 616 .height('150px') 617 .commands('M40 0 L80 100 L0 100 Z') 618 .fillOpacity(0) 619 .stroke(Color.Black) 620 .strokeWidth(3) 621 } 622 .onClick(() => { 623 configuration.triggerSelect(configuration.index, configuration.value.valueOf().toString()) 624 }) 625} 626 627@Entry 628@Component 629struct SelectExample { 630 @State text: string = "Content Modifier Select" 631 @State symbolModifier1: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_trash')).fontColor([Color.Gray]); 632 @State symbolModifier2: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.exposure')).fontColor([Color.Gray]); 633 build() { 634 Column() { 635 Row() { 636 Select([{ value: 'item1', icon: $r('app.media.icon'), symbolIcon: this.symbolModifier1 }, 637 { value: 'item1', icon: $r('app.media.icon'), symbolIcon: this.symbolModifier2 }]) 638 .value(this.text) 639 .onSelect((index:number, text?: string)=>{ 640 console.info('Select index:' + index) 641 console.info('Select text:' + text) 642 }) 643 .menuItemContentModifier(new MyMenuItemContentModifier("Content Modifier")) 644 645 }.alignItems(VerticalAlign.Center).height('50%') 646 } 647 } 648} 649``` 650 651 652## 示例5 653该示例实现了分割线样式支持自定义。 654 655```ts 656// xxx.ets 657@Entry 658@Component 659struct SelectExample { 660 @State text: string = "TTTTT" 661 @State index: number = -1 662 @State arrowPosition: ArrowPosition = ArrowPosition.END 663 build() { 664 Column() { 665 Select([{ value: 'aaa', icon: $r("app.media.icon") }, 666 { value: 'bbb', icon: $r("app.media.icon") }, 667 { value: 'ccc', icon: $r("app.media.icon") }, 668 { value: 'ddd', icon: $r("app.media.icon") }]) 669 .selected(this.index) 670 .value(this.text) 671 .font({ size: 16, weight: 500 }) 672 .fontColor('#182431') 673 .selectedOptionFont({ size: 16, weight: 400 }) 674 .optionFont({ size: 16, weight: 400 }) 675 .arrowPosition(this.arrowPosition) 676 .menuAlign(MenuAlignType.START, {dx:0, dy:0}) 677 .optionWidth(200) 678 .optionHeight(300) 679 .divider( { strokeWidth: 5, color: Color.Blue, startMargin: 10, endMargin: 10 }) 680 .onSelect((index:number, text?: string | undefined)=>{ 681 console.info('Select:' + index) 682 this.index = index; 683 if(text){ 684 this.text = text; 685 } 686 }) 687 }.width('100%') 688 } 689} 690``` 691 692 693## 示例6 694该示例实现了隐藏分割线。 695 696```ts 697// xxx.ets 698@Entry 699@Component 700struct SelectExample { 701 @State text: string = "TTTTT" 702 @State index: number = -1 703 @State arrowPosition: ArrowPosition = ArrowPosition.END 704 build() { 705 Column() { 706 Select([{ value: 'aaa', icon: $r("app.media.icon") }, 707 { value: 'bbb', icon: $r("app.media.icon") }, 708 { value: 'ccc', icon: $r("app.media.icon") }, 709 { value: 'ddd', icon: $r("app.media.icon") }]) 710 .selected(this.index) 711 .value(this.text) 712 .font({ size: 16, weight: 500 }) 713 .fontColor('#182431') 714 .selectedOptionFont({ size: 16, weight: 400 }) 715 .optionFont({ size: 16, weight: 400 }) 716 .arrowPosition(this.arrowPosition) 717 .menuAlign(MenuAlignType.START, {dx:0, dy:0}) 718 .optionWidth(200) 719 .optionHeight(300) 720 .divider( null ) 721 .onSelect((index:number, text?: string | undefined)=>{ 722 console.info('Select:' + index) 723 this.index = index; 724 if(text){ 725 this.text = text; 726 } 727 }) 728 }.width('100%') 729 } 730} 731``` 732 733
