1# Select 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @zhanghaibo0--> 5<!--Designer: @zhanghaibo0--> 6<!--Tester: @lxl007--> 7<!--Adviser: @HelloCrease--> 8 9提供下拉选择菜单，让用户在多个选项间选择。 10 11> **说明：** 12> 13> 该组件从API version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 14 15## 子组件 16 17无 18 19## 接口 20 21Select(options: Array\<SelectOption>) 22 23**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 24 25**系统能力：** SystemCapability.ArkUI.ArkUI.Full 26 27**参数：** 28 29| 参数名 | 类型 | 必填 | 说明 | 30| ------- | ---------------------------------------------- | ---- | -------------- | 31| options | Array\<[SelectOption](#selectoption对象说明)\> | 是 | 设置下拉选项。 | 32 33## SelectOption对象说明 34 35下拉菜单项的信息。 36 37**系统能力：** SystemCapability.ArkUI.ArkUI.Full 38 39| 名称 | 类型 | 只读 | 可选 | 说明 | 40| ------ | ----------------------------------- | ---- | -------------- | -------------- | 41| value | [ResourceStr](ts-types.md#resourcestr) | 否 | 否 | 下拉选项内容。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 42| icon | [ResourceStr](ts-types.md#resourcestr) | 否 | 是 | 下拉选项图片。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 43| symbolIcon<sup>12+</sup> |[SymbolGlyphModifier](ts-universal-attributes-attribute-symbolglyphmodifier.md) | 否 | 是 | 下拉选项Symbol图片。<br/>symbolIcon优先级高于icon。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。| 44 45## 属性 46 47除支持[通用属性](ts-component-general-attributes.md)外，还支持以下属性： 48 49### selected 50 51selected(value: number | Resource) 52 53设置下拉菜单初始选项的索引，第一项的索引为0。当不设置selected属性或设置为异常值时，默认选中值为-1，菜单项不选中；当设置为undefined、null时，选中第一项。 54 55从API version 10开始，该属性支持[$$](../../../ui/state-management/arkts-two-way-sync.md)双向绑定变量。 56从API version 18开始，该属性支持[!!](../../../ui/state-management/arkts-new-binding.md#系统组件参数双向绑定)双向绑定变量。 57 58**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 59 60**系统能力：** SystemCapability.ArkUI.ArkUI.Full 61 62**参数：** 63 64| 参数名 | 类型 | 必填 | 说明 | 65| ------ | ------------------------------------------------------------ | ---- | ------------------------ | 66| value | number \| [Resource](ts-types.md#resource)<sup>11+</sup> | 是 | 下拉菜单初始选项的索引，索引值从0开始。 | 67 68### selected<sup>18+</sup> 69 70selected(numCount: Optional<number | Resource>) 71 72设置下拉菜单初始选项的索引，第一项的索引为0。当不设置selected属性或设置异常值时，默认选择值为-1，菜单项不选中；当设置为undefined、null时，选中第一项。 73 74该属性支持[$$](../../../ui/state-management/arkts-two-way-sync.md)、[!!](../../../ui/state-management/arkts-new-binding.md#系统组件参数双向绑定)双向绑定变量。 75 76**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 77 78**系统能力：** SystemCapability.ArkUI.ArkUI.Full 79 80**参数：** 81 82| 参数名 | 类型 | 必填 | 说明 | 83| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 84| numCount | [Optional](ts-universal-attributes-custom-property.md#optionalt12)\<number \| [Resource](ts-types.md#resource)> | 是 | 下拉菜单初始选项的索引。<br/>当numCount的值为undefined时，选中第一项。 | 85 86### value 87 88value(value: ResourceStr) 89 90设置下拉按钮的文本内容。选中菜单项后，按钮文本将自动更新为选中的菜单项文本。 91 92从API version 10开始，该参数支持[$$](../../../ui/state-management/arkts-two-way-sync.md)双向绑定变量。 93从API version 18开始，该参数支持[!!](../../../ui/state-management/arkts-new-binding.md#系统组件参数双向绑定)双向绑定变量。 94 95**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 96 97**系统能力：** SystemCapability.ArkUI.ArkUI.Full 98 99**参数：** 100 101| 参数名 | 类型 | 必填 | 说明 | 102| ------ | ---------------------------------------------------- | ---- | ------------------------ | 103| value | [ResourceStr](ts-types.md#resourcestr)<sup>11+</sup> | 是 | 下拉按钮本身的文本内容。<br/>**说明：** 文本长度大于列宽时，文本被截断。 | 104 105### value<sup>18+</sup> 106 107value(resStr: Optional\<ResourceStr>) 108 109设置下拉按钮的文本内容。选中菜单项后，按钮文本将自动更新为选中的菜单项文本。与[value](#value)相比，resStr参数新增了对undefined类型的支持。 110 111该参数支持[$$](../../../ui/state-management/arkts-two-way-sync.md)、[!!](../../../ui/state-management/arkts-new-binding.md#系统组件参数双向绑定)双向绑定变量。 112 113**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 114 115**系统能力：** SystemCapability.ArkUI.ArkUI.Full 116 117**参数：** 118 119| 参数名 | 类型 | 必填 | 说明 | 120| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 121| resStr | [Optional](ts-universal-attributes-custom-property.md#optionalt12)\<[ResourceStr](ts-types.md#resourcestr)> | 是 | 下拉按钮本身的文本内容。<br/>当resStr的值为undefined时维持上次取值。 | 122 123### controlSize<sup>12+</sup> 124 125controlSize(value: ControlSize) 126 127设置Select组件的尺寸。 128 129**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 130 131**系统能力：** SystemCapability.ArkUI.ArkUI.Full 132 133**参数：** 134 135| 参数名 | 类型 | 必填 | 说明 | 136| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------- | 137| value | [ControlSize](ts-basic-components-button.md#controlsize11枚举说明)<sup>11+</sup> | 是 | Select组件的尺寸。<br/>默认值：ControlSize.NORMAL | 138 139controlSize、width、height接口作用优先级： 140 141 1）如果开发者只设置了width和height，当文字大小设置为较大的值时，文字会超出组件大小，且以省略号方式显示； 142 143 2）如果开发者只设置了controlSize，没有设置width和height，组件宽高自适应文字，文字不超出组件，并设置最小宽度minWidth和最小高度minHeight； 144 145 3）如果同时设置了controlSize、width、height接口，width和height设置的值生效，但如果width和height设置的值小于controlSize设置的最小宽度minWidth和最小高度minHeight，width和height设置的值不生效，宽高仍保持controlSize设置的最小宽度minWidth和最小高度minHeight。 146 147### controlSize<sup>18+</sup> 148 149controlSize(size: Optional\<ControlSize>) 150 151设置Select组件的尺寸。与[controlSize](#controlsize12)<sup>12+</sup>相比，size参数新增了对undefined类型的支持。 152 153**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 154 155**系统能力：** SystemCapability.ArkUI.ArkUI.Full 156 157**参数：** 158 159| 参数名 | 类型 | 必填 | 说明 | 160| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 161| size | [Optional](ts-universal-attributes-custom-property.md#optionalt12)\<[ControlSize](ts-basic-components-button.md#controlsize11枚举说明)> | 是 | Select组件的尺寸。<br/>当size的值为undefined时，默认值为ControlSize.NORMAL。 | 162 163controlSize、width、height接口作用优先级： 164 165 1）如果开发者只设置了width和height，当文字大小设置的是比较大的值的时候，文字超出组件大小，且以省略号方式显示； 166 167 2）如果开发者只设置了controlSize，没有设置width和height，组件宽高自适应文字，文字不超出组件，并设置最小宽度minWidth和最小高度minHeight； 168 169 3）如果controlSize、width、height接口都设置了，width和height设置的值生效，但如果width和height设置的值小于controlSize设置的最小宽度minWidth和最小高度minHeight，width和height设置的值不生效，宽高仍保持controlSize设置的最小宽度minWidth和最小高度minHeight。 170 171### menuItemContentModifier<sup>12+</sup> 172 173menuItemContentModifier(modifier: ContentModifier\<MenuItemConfiguration>) 174 175定制Select下拉菜单项内容区的方法。在应用了menuItemContentModifier后，下拉菜单的内容将完全由开发者自定义，此时为Select组件设置的分割线、选项颜色及下拉菜单的字体颜色等属性将不再生效。 176 177**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 178 179**系统能力：** SystemCapability.ArkUI.ArkUI.Full 180 181**参数：** 182 183| 参数名 | 类型 | 必填 | 说明 | 184| ------ | --------------------------------------------- | ---- | ------------------------------------------------ | 185| modifier | [ContentModifier\<MenuItemConfiguration>](#menuitemconfiguration12对象说明) | 是 | 在Select组件上，定制下拉菜单项内容区的方法。<br/>modifier：内容修改器，开发者需要自定义class实现ContentModifier接口。 | 186 187### menuItemContentModifier<sup>18+</sup> 188 189menuItemContentModifier(modifier: Optional\<ContentModifier\<MenuItemConfiguration>>) 190 191定制Select下拉菜单项内容区的方法。与[menuItemContentModifier](#menuitemcontentmodifier12)<sup>12+</sup>相比，modifier参数新增了对undefined类型的支持。在应用了menuItemContentModifier后，下拉菜单的内容将完全由开发者自定义，此时为Select组件设置的分割线、选项颜色及下拉菜单的字体颜色等属性将不再生效。 192 193**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 194 195**系统能力：** SystemCapability.ArkUI.ArkUI.Full 196 197**参数：** 198 199| 参数名 | 类型 | 必填 | 说明 | 200| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 201| modifier | [Optional](ts-universal-attributes-custom-property.md#optionalt12)\<[ContentModifier\<MenuItemConfiguration>](#menuitemconfiguration12对象说明)> | 是 | 在Select组件上，定制下拉菜单项内容区的方法。<br/>modifier：内容修改器，开发者需要自定义class实现ContentModifier接口。<br/>当modifier的值为undefined时，不使用内容修改器。 | 202 203### divider<sup>12+</sup> 204 205divider(options: Optional\<DividerOptions> | null) 206 207设置分割线样式，不设置该属性则按“默认值”展示分割线。 208 209**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 210 211**系统能力：** SystemCapability.ArkUI.ArkUI.Full 212 213**参数：** 214 215| 参数名 | 类型 | 必填 | 说明 | 216| ------ | ------- | ---- | --------------------------------------------------------------------- | 217| 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的值时，按照默认样式显示分割线。| 218 219### dividerStyle<sup>19+</sup> 220 221dividerStyle(style: Optional\<DividerStyleOptions>) 222 223设置分割线样式，不设置该属性则按“默认值”展示分割线。该属性与divider互斥，按调用顺序生效。 224 225**原子化服务API：** 从API version 19开始，该接口支持在原子化服务中使用。 226 227**系统能力：** SystemCapability.ArkUI.ArkUI.Full 228 229**参数：** 230 231| 参数名 | 类型 | 必填 | 说明 | 232| ------ | ------- | ---- | --------------------------------------------------------------------- | 233| style | Optional\<[DividerStyleOptions](ts-types.md#dividerstyleoptions12)> | 是 | 1.设置DividerOptions，则按设置的样式显示分割线。<br/>默认值：<br/>{<br/>strokeWidth: '1px' , <br/>color: '#33182431'<br/>}<br/>2.设置为null或undefined时，展示默认分割线。<br/>3.当mode为FLOAT_ABOVE_MENU时，strokeWidth设置过宽时，会覆盖文字。分割线会从每一个Item底部开始，同时向上向下画分割线。当mode为EMBEDDED_IN_MENU时，分割线在Menu中展开，独立占用高度。<br/>4.startMargin和endMargin的默认值与不设置divider属性时的分割线样式保持一致。startMargin和endMargin的和与optionWidth的值相等时，不显示分割线。startMargin和endMargin的和超过optionWidth的值时，按照默认样式显示分割线。| 234 235### font 236 237font(value: Font) 238 239设置下拉按钮本身的文本样式。当size为0时，文本不显示，当size为负值时，文本的size按照默认值显示。 240 241**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 242 243**系统能力：** SystemCapability.ArkUI.ArkUI.Full 244 245**参数：** 246 247| 参数名 | 类型 | 必填 | 说明 | 248| ------ | ------------------------ | ---- | ------------------------------------------------------------ | 249| 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')`。 | 250 251### font<sup>18+</sup> 252 253font(selectFont: Optional\<Font>) 254 255设置下拉按钮本身的文本样式。当size为0时，文本不显示，当size为负值时，文本的size按照默认值显示。与[font](#font)相比，selectFont参数新增了对undefined类型的支持。 256 257**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 258 259**系统能力：** SystemCapability.ArkUI.ArkUI.Full 260 261**参数：** 262 263| 参数名 | 类型 | 必填 | 说明 | 264| ---------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 265| selectFont | [Optional](ts-universal-attributes-custom-property.md#optionalt12)\<[Font](ts-types.md#font)> | 是 | 下拉按钮本身的文本样式。<br/>如果设置controlSize的值为：controlSize.SMALL，size默认值是`$r('sys.float.ohos_id_text_size_button2')`，否则为`$r('sys.float.ohos_id_text_size_button1')`。<br/>当selectFont的值为undefined时，恢复为系统文本样式。 | 266 267### fontColor 268 269fontColor(value: ResourceColor) 270 271设置下拉按钮本身的文本颜色。 272 273**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 274 275**系统能力：** SystemCapability.ArkUI.ArkUI.Full 276 277**参数：** 278 279| 参数名 | 类型 | 必填 | 说明 | 280| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ | 281| value | [ResourceColor](ts-types.md#resourcecolor) | 是 | 下拉按钮本身的文本颜色。<br/>默认值：`$r('sys.color.ohos_id_color_text_primary')`混合`$r('sys.color.ohos_id_alpha_content_primary')`的透明度。 | 282 283### fontColor<sup>18+</sup> 284 285fontColor(resColor: Optional\<ResourceColor>) 286 287设置下拉按钮本身的文本颜色。与[fontColor](#fontcolor)相比，resColor参数新增了对undefined类型的支持。 288 289**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 290 291**系统能力：** SystemCapability.ArkUI.ArkUI.Full 292 293**参数：** 294 295| 参数名 | 类型 | 必填 | 说明 | 296| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 297| resColor | [Optional](ts-universal-attributes-custom-property.md#optionalt12)\<[ResourceColor](ts-types.md#resourcecolor)> | 是 | 下拉按钮本身的文本颜色。<br/>当resColor的值为undefined时，默认值：`$r('sys.color.ohos_id_color_text_primary')`混合`$r('sys.color.ohos_id_alpha_content_primary')`的透明度。<br/>当value的值为undefined时，维持上次取值。 | 298 299### selectedOptionBgColor 300 301selectedOptionBgColor(value: ResourceColor) 302 303设置下拉菜单选中项的背景色。 304 305**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 306 307**系统能力：** SystemCapability.ArkUI.ArkUI.Full 308 309**参数：** 310 311| 参数名 | 类型 | 必填 | 说明 | 312| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ | 313| value | [ResourceColor](ts-types.md#resourcecolor) | 是 | 下拉菜单选中项的背景色。<br/>默认值：`$r('sys.color.ohos_id_color_component_activated')`混合`$r('sys.color.ohos_id_alpha_highlight_bg')`的透明度。 | 314 315### selectedOptionBgColor<sup>18+</sup> 316 317selectedOptionBgColor(resColor: Optional\<ResourceColor>) 318 319设置下拉菜单选中项的背景色。与[selectedOptionBgColor](#selectedoptionbgcolor)相比，resColor参数新增了对undefined类型的支持。 320 321**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 322 323**系统能力：** SystemCapability.ArkUI.ArkUI.Full 324 325**参数：** 326 327| 参数名 | 类型 | 必填 | 说明 | 328| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 329| resColor | [Optional](ts-universal-attributes-custom-property.md#optionalt12)\<[ResourceColor](ts-types.md#resourcecolor)> | 是 | 下拉菜单选中项的背景色。<br/>当resColor的值为undefined时，默认值：`$r('sys.color.ohos_id_color_component_activated')`混合`$r('sys.color.ohos_id_alpha_highlight_bg')`的透明度。 | 330 331### selectedOptionFont 332 333selectedOptionFont(value: Font) 334 335设置下拉菜单选中项的文本样式。当size为0的时候，文本不显示，当size为负值的时候，文本的size按照默认值显示。 336 337**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 338 339**系统能力：** SystemCapability.ArkUI.ArkUI.Full 340 341**参数：** 342 343| 参数名 | 类型 | 必填 | 说明 | 344| ------ | ------------------------ | ---- | ------------------------------------------------------------ | 345| value | [Font](ts-types.md#font) | 是 | 下拉菜单选中项的文本样式。<br/>默认值：<br/>{<br/>size: $r('sys.float.ohos_id_text_size_body1'),<br/>weight: FontWeight.Regular<br/>} | 346 347### selectedOptionFont<sup>18+</sup> 348 349selectedOptionFont(selectFont: Optional\<Font>) 350 351设置下拉菜单选中项的文本样式。当size为0的时候，文本不显示，当size为负值的时候，文本的size按照默认值显示。与[selectedOptionFont](#selectedoptionfont)相比，selectFont参数新增了对undefined类型的支持。 352 353**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 354 355**系统能力：** SystemCapability.ArkUI.ArkUI.Full 356 357**参数：** 358 359| 参数名 | 类型 | 必填 | 说明 | 360| ---------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 361| selectFont | [Optional](ts-universal-attributes-custom-property.md#optionalt12)\<[Font](ts-types.md#font)> | 是 | 下拉菜单选中项的文本样式。<br/>当selectFont的值为undefined时，默认值：<br/>{<br/>size: $r('sys.float.ohos_id_text_size_body1'),<br/>weight: FontWeight.Regular<br/>} | 362 363### selectedOptionFontColor 364 365selectedOptionFontColor(value: ResourceColor) 366 367设置下拉菜单选中项的文本颜色。 368 369**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 370 371**系统能力：** SystemCapability.ArkUI.ArkUI.Full 372 373**参数：** 374 375| 参数名 | 类型 | 必填 | 说明 | 376| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ | 377| value | [ResourceColor](ts-types.md#resourcecolor) | 是 | 下拉菜单选中项的文本颜色。<br/>默认值：$r('sys.color.ohos_id_color_text_primary_activated') | 378 379### selectedOptionFontColor<sup>18+</sup> 380 381selectedOptionFontColor(resColor: Optional\<ResourceColor>) 382 383设置下拉菜单选中项的文本颜色。与[selectedOptionFontColor](#selectedoptionfontcolor)相比，resColor参数新增了对undefined类型的支持。 384 385**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 386 387**系统能力：** SystemCapability.ArkUI.ArkUI.Full 388 389**参数：** 390 391| 参数名 | 类型 | 必填 | 说明 | 392| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 393| resColor | [Optional](ts-universal-attributes-custom-property.md#optionalt12)\<[ResourceColor](ts-types.md#resourcecolor)> | 是 | 下拉菜单选中项的文本颜色。<br/>当resColor的值为undefined时，默认值为$r('sys.color.ohos_id_color_text_primary_activated')。 | 394 395### optionBgColor 396 397optionBgColor(value: ResourceColor) 398 399设置下拉菜单项的背景色。 400 401**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 402 403**系统能力：** SystemCapability.ArkUI.ArkUI.Full 404 405**参数：** 406 407| 参数名 | 类型 | 必填 | 说明 | 408| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ | 409| value | [ResourceColor](ts-types.md#resourcecolor) | 是 | 下拉菜单项的背景色。<br/>默认值：<br/>API version 11之前，默认值为Color.White。<br/>API version 11及之后，默认值为Color.Transparent。 | 410 411### optionBgColor<sup>18+</sup> 412 413optionBgColor(resColor: Optional\<ResourceColor>) 414 415设置下拉菜单项的背景色。与[optionBgColor](#optionbgcolor)相比，resColor参数新增了对undefined类型的支持。 416 417**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 418 419**系统能力：** SystemCapability.ArkUI.ArkUI.Full 420 421**参数：** 422 423| 参数名 | 类型 | 必填 | 说明 | 424| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 425| resColor | [Optional](ts-universal-attributes-custom-property.md#optionalt12)\<[ResourceColor](ts-types.md#resourcecolor)> | 是 | 下拉菜单项的背景色。<br/>当resColor的值为undefined时，默认值为Color.Transparent。 | 426 427### optionFont 428 429optionFont(value: Font) 430 431设置下拉菜单项的文本样式。当size为0的时候，文本不显示，当size为负值的时候，文本的size按照默认值显示。 432 433**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 434 435**系统能力：** SystemCapability.ArkUI.ArkUI.Full 436 437**参数：** 438 439| 参数名 | 类型 | 必填 | 说明 | 440| ------ | ------------------------ | ---- | ------------------------------------------------------------ | 441| value | [Font](ts-types.md#font) | 是 | 下拉菜单项的文本样式。<br/>默认值：<br/>{<br/>size: $r('sys.float.ohos_id_text_size_body1'),<br/>weight: FontWeight.Regular<br/>} | 442 443### optionFont<sup>18+</sup> 444 445optionFont(selectFont: Optional\<Font>) 446 447设置下拉菜单项的文本样式。当size为0的时候，文本不显示，当size为负值的时候，文本的size按照默认值显示。 448 449与[optionFont](#optionfont)相比，selectFont参数新增了对undefined类型的支持。 450 451**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 452 453**系统能力：** SystemCapability.ArkUI.ArkUI.Full 454 455**参数：** 456 457| 参数名 | 类型 | 必填 | 说明 | 458| ---------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 459| selectFont | [Optional](ts-universal-attributes-custom-property.md#optionalt12)\<[Font](ts-types.md#font)> | 是 | 下拉菜单项的文本样式。<br/>当selectFont的值为undefined时，默认值：<br/>{<br/>size: $r('sys.float.ohos_id_text_size_body1'),<br/>weight: FontWeight.Regular<br/>} | 460 461### optionFontColor 462 463optionFontColor(value: ResourceColor) 464 465设置下拉菜单项的文本颜色。 466 467**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 468 469**系统能力：** SystemCapability.ArkUI.ArkUI.Full 470 471**参数：** 472 473| 参数名 | 类型 | 必填 | 说明 | 474| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ | 475| value | [ResourceColor](ts-types.md#resourcecolor) | 是 | 下拉菜单项的文本颜色。<br/>默认值：$r('sys.color.ohos_id_color_text_primary') | 476 477### optionFontColor<sup>18+</sup> 478 479optionFontColor(resColor: Optional\<ResourceColor>) 480 481设置下拉菜单项的文本颜色。与[optionFontColor](#optionfontcolor)相比，resColor参数新增了对undefined类型的支持。 482 483**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 484 485**系统能力：** SystemCapability.ArkUI.ArkUI.Full 486 487**参数：** 488 489| 参数名 | 类型 | 必填 | 说明 | 490| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 491| resColor | [Optional](ts-universal-attributes-custom-property.md#optionalt12)\<[ResourceColor](ts-types.md#resourcecolor)> | 是 | 下拉菜单项的文本颜色。<br/>当resColor的值为undefined时，默认值：$r('sys.color.ohos_id_color_text_primary') | 492 493### space<sup>10+</sup> 494 495space(value: Length) 496 497设置下拉菜单项的文本与箭头的间距。不支持设置百分比。将间距设置为null、undefined，或者小于等于8的值时，取默认值。 498 499**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 500 501**系统能力：** SystemCapability.ArkUI.ArkUI.Full 502 503**参数：** 504 505| 参数名 | 类型 | 必填 | 说明 | 506| ------ | ---------------------------- | ---- | ------------------------------------------------ | 507| value | [Length](ts-types.md#length) | 是 | 下拉菜单项的文本与箭头的间距。<br/>默认值：8<br/>**说明：** 设置string类型时，不支持百分比。 | 508 509### space<sup>18+</sup> 510 511space(spaceLength: Optional\<Length>) 512 513设置下拉菜单项的文本与箭头的间距。不支持设置百分比。设置为null、undefined，或者小于等于8的值，取默认值。 514 515**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 516 517**系统能力：** SystemCapability.ArkUI.ArkUI.Full 518 519**参数：** 520 521| 参数名 | 类型 | 必填 | 说明 | 522| ----------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 523| spaceLength | [Optional](ts-universal-attributes-custom-property.md#optionalt12)\<[Length](ts-types.md#length)> | 是 | 下拉菜单项的文本与箭头之间的间距。<br/>当spaceLength的值为undefined时，默认值：8 | 524 525### arrowPosition<sup>10+</sup> 526 527arrowPosition(value: ArrowPosition) 528 529设置下拉菜单项的文本与箭头之间的对齐方式。 530 531**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 532 533**系统能力：** SystemCapability.ArkUI.ArkUI.Full 534 535**参数：** 536 537| 参数名 | 类型 | 必填 | 说明 | 538| ------ | ----------------------------------------- | ---- | ------------------------------------------------------------ | 539| value | [ArrowPosition](#arrowposition10枚举说明) | 是 | 下拉菜单项的文本与箭头之间的对齐方式。<br/>默认值：ArrowPosition.END | 540 541### arrowPosition<sup>18+</sup> 542 543arrowPosition(position: Optional\<ArrowPosition>) 544 545设置下拉菜单项的文本与箭头之间的对齐方式。与[arrowPosition](#arrowposition10)相比，position参数新增了对undefined类型的支持。 546 547**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 548 549**系统能力：** SystemCapability.ArkUI.ArkUI.Full 550 551**参数：** 552 553| 参数名 | 类型 | 必填 | 说明 | 554| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 555| position | [Optional](ts-universal-attributes-custom-property.md#optionalt12)\<[ArrowPosition](#arrowposition10枚举说明)> | 是 | 下拉菜单项的文本与箭头之间的对齐方式。<br/>当position的值为undefined时，默认值：ArrowPosition.END | 556 557### menuAlign<sup>10+</sup> 558 559menuAlign(alignType: MenuAlignType, offset?: Offset) 560 561设置下拉按钮与下拉菜单间的对齐方式。 562 563**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 564 565**系统能力：** SystemCapability.ArkUI.ArkUI.Full 566 567**参数：** 568 569| 参数名 | 类型 | 必填 | 说明 | 570| --------- | ----------------------------------------- | ---- | ------------------------------------------------------------ | 571| alignType | [MenuAlignType](#menualigntype10枚举说明) | 是 | 对齐方式类型。<br/>默认值：MenuAlignType.START | 572| offset | [Offset](ts-types.md#offset) | 否 | 按照对齐类型对齐后，下拉菜单相对下拉按钮的偏移量。<br/> 默认值：{dx: 0, dy: 0} | 573 574### menuAlign<sup>18+</sup> 575 576menuAlign(alignType: Optional\<MenuAlignType>, offset?: Offset) 577 578设置下拉按钮与下拉菜单间的对齐方式。与[menuAlign](#menualign10)<sup>10+</sup>相比，alignType参数新增了对undefined类型的支持。 579 580**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 581 582**系统能力：** SystemCapability.ArkUI.ArkUI.Full 583 584**参数：** 585 586| 参数名 | 类型 | 必填 | 说明 | 587| --------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 588| alignType | [Optional](ts-universal-attributes-custom-property.md#optionalt12)\<[MenuAlignType](#menualigntype10枚举说明)> | 是 | 对齐方式类型。<br/>当alignType的值为undefined时，默认值：MenuAlignType.START | 589| offset | [Offset](ts-types.md#offset) | 否 | 按照对齐类型对齐后，下拉菜单相对下拉按钮的偏移量。<br/> 默认值：{dx: 0, dy: 0} | 590 591### optionWidth<sup>11+</sup> 592 593optionWidth(value: Dimension | OptionWidthMode ) 594 595设置下拉菜单项的宽度，不支持设置百分比。OptionWidthMode类型为枚举类型，OptionWidthMode决定下拉菜单是否继承下拉按钮宽度。 596 597当设置为异常值或小于最小宽度56vp时，属性无效，菜单项宽度设为默认值，即2栅格。 598 599Select组件距屏幕边缘的左右间距为16vp，建议将组件本身及菜单项的宽度设置为小于等于`calc(100% - 32vp)`的值，以避免下拉菜单弹出时发生偏移。 600 601**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 602 603**系统能力：** SystemCapability.ArkUI.ArkUI.Full 604 605**参数：** 606 607| 参数名 | 类型 | 必填 | 说明 | 608| ------ | ------------------------------------------------------------ | ---- | ------------------ | 609| value | [Dimension](ts-types.md#dimension10) \| [OptionWidthMode](ts-appendix-enums.md#optionwidthmode11) | 是 | 下拉菜单项的宽度。 | 610 611### optionWidth<sup>18+</sup> 612 613optionWidth(width: Optional\<Dimension | OptionWidthMode> ) 614 615设置下拉菜单项的宽度，不支持设置百分比。OptionWidthMode类型为枚举类型，OptionWidthMode决定下拉菜单是否继承下拉按钮宽度。与[optionWidth](#optionwidth11)<sup>11+</sup>相比，width参数新增了对undefined类型的支持。 616 617当设置为异常值或小于最小宽度56vp时，属性无效，菜单项宽度设为默认值，即2栅格。 618 619Select组件距屏幕边缘的左右间距为16vp，建议将组件本身及菜单项的宽度设置为小于等于`calc(100% - 32vp)`的值，以避免下拉菜单弹出时发生偏移。 620 621**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 622 623**系统能力：** SystemCapability.ArkUI.ArkUI.Full 624 625**参数：** 626 627| 参数名 | 类型 | 必填 | 说明 | 628| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 629| width | [Optional](ts-universal-attributes-custom-property.md#optionalt12)\<[Dimension](ts-types.md#dimension10) \| [OptionWidthMode](ts-appendix-enums.md#optionwidthmode11)> | 是 | 下拉菜单项的宽度。<br/>当width的值为undefined时，属性无效，菜单项宽度设为默认值，即2栅格。 | 630 631### optionHeight<sup>11+</sup> 632 633optionHeight(value: Dimension) 634 635设置下拉菜单显示的最大高度，不支持设置百分比。默认最大高度是屏幕可用高度的80%，设置的菜单最大高度不能超过默认最大高度。 636 637当设置为异常值或零时，属性不生效。 638 639如果下拉菜单所有选项的实际高度没有设定的高度大，下拉菜单的高度按实际高度显示。 640 641**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 642 643**系统能力：** SystemCapability.ArkUI.ArkUI.Full 644 645**参数：** 646 647| 参数名 | 类型 | 必填 | 说明 | 648| ------ | ------------------------------------ | ---- | ------------------------ | 649| value | [Dimension](ts-types.md#dimension10) | 是 | 下拉菜单显示的最大高度。 | 650 651### optionHeight<sup>18+</sup> 652 653optionHeight(height: Optional\<Dimension>) 654 655设置下拉菜单显示的最大高度，不支持设置百分比。默认最大高度是屏幕可用高度的80%，设置的菜单最大高度不能超过默认最大高度。与[optionHeight](#optionheight11)<sup>11+</sup>相比，height参数新增了对undefined类型的支持。 656 657当设置为异常值或零时，属性不生效。 658 659如果下拉菜单所有选项的实际高度小于设定的高度，下拉菜单的高度按实际高度显示。 660 661**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 662 663**系统能力：** SystemCapability.ArkUI.ArkUI.Full 664 665**参数：** 666 667| 参数名 | 类型 | 必填 | 说明 | 668| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 669| height | [Optional](ts-universal-attributes-custom-property.md#optionalt12)\<[Dimension](ts-types.md#dimension10)> | 是 | 下拉菜单显示的最大高度。<br/>当height的值为undefined时，属性不生效，下拉菜单最大高度设为默认值，即下拉菜单最大高度默认值为屏幕可用高度的80%。 | 670 671### menuBackgroundColor<sup>11+</sup> 672 673menuBackgroundColor(value: ResourceColor) 674 675设置下拉菜单的背景色。 676 677**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 678 679**系统能力：** SystemCapability.ArkUI.ArkUI.Full 680 681**参数：** 682 683| 参数名 | 类型 | 必填 | 说明 | 684| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ | 685| 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。 | 686 687### menuBackgroundColor<sup>18+</sup> 688 689menuBackgroundColor(resColor: Optional\<ResourceColor>) 690 691设置下拉菜单的背景色。与[menuBackgroundColor](#menubackgroundcolor11)<sup>11+</sup>相比，resColor参数新增了对undefined类型的支持。 692 693**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 694 695**系统能力：** SystemCapability.ArkUI.ArkUI.Full 696 697**参数：** 698 699| 参数名 | 类型 | 必填 | 说明 | 700| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 701| resColor | [Optional](ts-universal-attributes-custom-property.md#optionalt12)\<[ResourceColor](ts-types.md#resourcecolor)> | 是 | 下拉菜单的背景色。<br/>当resColor的值为undefined时，默认值为Color.Transparent。 | 702 703### menuBackgroundBlurStyle<sup>11+</sup> 704 705menuBackgroundBlurStyle(value: BlurStyle) 706 707设置下拉菜单的背景模糊材质。 708 709**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 710 711**系统能力：** SystemCapability.ArkUI.ArkUI.Full 712 713**参数：** 714 715| 参数名 | 类型 | 必填 | 说明 | 716| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 717| value | [BlurStyle](ts-universal-attributes-background.md#blurstyle9) | 是 | 下拉菜单的背景模糊材质。<br/>默认值：BlurStyle.COMPONENT_ULTRA_THICK | 718 719### menuBackgroundBlurStyle<sup>18+</sup> 720 721menuBackgroundBlurStyle(style: Optional\<BlurStyle>) 722 723设置下拉菜单的背景模糊材质。与[menuBackgroundBlurStyle](#menubackgroundblurstyle11)<sup>11+</sup>相比，style参数新增了对undefined类型的支持。 724 725**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 726 727**系统能力：** SystemCapability.ArkUI.ArkUI.Full 728 729**参数：** 730 731| 参数名 | 类型 | 必填 | 说明 | 732| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 733| style | [Optional](ts-universal-attributes-custom-property.md#optionalt12)\<[BlurStyle](ts-universal-attributes-background.md#blurstyle9)> | 是 | 下拉菜单的背景模糊材质。<br/>当style的值为undefined时，默认值：BlurStyle.COMPONENT_ULTRA_THICK | 734 735### avoidance<sup>19+</sup> 736 737avoidance(mode: AvoidanceMode) 738 739设置下拉菜单的避让模式。 740 741**原子化服务API：** 从API version 19开始，该接口支持在原子化服务中使用。 742 743**系统能力：** SystemCapability.ArkUI.ArkUI.Full 744 745**参数：** 746 747| 参数名 | 类型 | 必填 | 说明 | 748| --------- | ----------------------------------------- | ---- | ------------------------------------------------------------ | 749| mode | [AvoidanceMode](#avoidancemode19枚举说明) | 是 | 设置下拉菜单的避让模式。<br/>默认值：AvoidanceMode.COVER_TARGET | 750 751### menuOutline<sup>20+</sup> 752 753menuOutline(outline: MenuOutlineOptions) 754 755设置下拉菜单框的外描边样式。 756 757**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 758 759**系统能力：** SystemCapability.ArkUI.ArkUI.Full 760 761**参数：** 762 763| 参数名 | 类型 | 必填 | 说明 | 764| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 765| outline | [MenuOutlineOptions](#menuoutlineoptions20对象说明) | 是 | 下拉菜单框的外描边样式。 | 766 767### showDefaultSelectedIcon<sup>20+</sup> 768 769showDefaultSelectedIcon(show: boolean) 770 771设置是否显示默认选择的图标。 772 773**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 774 775**系统能力：** SystemCapability.ArkUI.ArkUI.Full 776 777**参数：** 778 779| 参数名 | 类型 | 必填 | 说明 | 780| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 781| show | boolean | 是 | 是否显示默认选定的图标。<br>默认值为false，true代表显示默认选择的图标，false代表不显示默认选择的图标。<br>当show为true，并且通过selectedOptionBgColor设置选中项的背景色时，同时显示所设置的选中项的背景色和默认选定的图标；当show为true，但未通过selectedOptionBgColor设置选中项的背景色时，不突出显示背景色，只显示默认选定的图标。false代表不显示默认选定的图标，通过突出显示背景色来表示选中。 | 782 783### textModifier<sup>20+</sup> 784 785textModifier(modifier: Optional\<[TextModifier](ts-universal-attributes-attribute-modifier.md)>) 786 787定制Select按钮文本样式的方法，在应用了textModifier之后，Select按钮的文本样式将完全由开发者自定义。 788 789**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 790 791**系统能力：** SystemCapability.ArkUI.ArkUI.Full 792 793**参数：** 794 795| 参数名 | 类型 | 必填 | 说明 | 796| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 797| modifier | [Optional](ts-universal-attributes-custom-property.md#optionalt12)\<[TextModifier](ts-universal-attributes-attribute-modifier.md)> | 是 | 在Select组件上，定制按钮文本样式的方法。 | 798 799### arrowModifier<sup>20+</sup> 800 801arrowModifier(modifier: Optional\<SymbolGlyphModifier>) 802 803定制Select按钮下拉箭头图标样式的方法，在应用arrowModifier之后，Select按钮下拉箭头的图标样式将完全由开发者自定义。 804 805**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 806 807**系统能力：** SystemCapability.ArkUI.ArkUI.Full 808 809**参数：** 810 811| 参数名 | 类型 | 必填 | 说明 | 812| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 813| modifier | [Optional](ts-universal-attributes-custom-property.md#optionalt12)\<[SymbolGlyphModifier](ts-universal-attributes-attribute-symbolglyphmodifier.md)> | 是 | 在Select组件上，定制Select按钮下拉箭头图标样式的方法。 | 814 815### optionTextModifier<sup>20+</sup> 816 817optionTextModifier(modifier: Optional\<[TextModifier](ts-universal-attributes-attribute-modifier.md)>) 818 819定制Select下拉菜单未选中项文本样式的方法，在应用optionTextModifier之后，下拉菜单未选中项的文本样式将完全由开发者自定义。 820 821如果[optionFont](#optionfont)与optionTextModifier的Font属性同时设置，则优先使用[optionFont](#optionfont)设置下拉菜单未选中项的文本样式；[optionFont](#optionfont)中缺省的属性将设置为对应的默认值。 822 823**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 824 825**系统能力：** SystemCapability.ArkUI.ArkUI.Full 826 827**参数：** 828 829| 参数名 | 类型 | 必填 | 说明 | 830| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 831| modifier | [Optional](ts-universal-attributes-custom-property.md#optionalt12)\<[TextModifier](ts-universal-attributes-attribute-modifier.md)> | 是 | 在Select组件上，定制Select下拉菜单未选中项样式的方法。| 832 833### selectedOptionTextModifier<sup>20+</sup> 834 835selectedOptionTextModifier(modifier: Optional\<[TextModifier](ts-universal-attributes-attribute-modifier.md)>) 836 837定制Select下拉菜单选中项文本样式的方法，在应用selectedOptionTextModifier之后，下拉菜单选中项的文本样式将完全由开发者自定义。 838 839如果[selectedOptionFont](#selectedoptionfont)与selectedOptionTextModifier的Font属性同时设置，则优先使用[selectedOptionFont](#selectedoptionfont)设置下拉菜单选中项的文本样式；若未设置[selectedOptionFont](#selectedoptionfont)，则优先使用[optionFont](#optionfont)设置下拉菜单选中项的文本样式。其中[selectedOptionFont](#selectedoptionfont)或者[optionFont](#optionfont)缺省的属性将设置为对应的默认值。 840 841**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 842 843**系统能力：** SystemCapability.ArkUI.ArkUI.Full 844 845**参数：** 846 847| 参数名 | 类型 | 必填 | 说明 | 848| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 849| modifier | [Optional](ts-universal-attributes-custom-property.md#optionalt12)\<[TextModifier](ts-universal-attributes-attribute-modifier.md)> | 是 | 设置下拉菜单项选中项的文本样式。<br/>开发者可以根据需要管理和维护文本的样式进行设置。 | 850 851### showInSubWindow<sup>20+</sup> 852 853showInSubWindow(showInSubWindow:Optional\<boolean>) 854 855设置Select的Menu是否显示在子窗中。 856 857**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 858 859**系统能力：** SystemCapability.ArkUI.ArkUI.Full 860 861**参数：** 862 863| 参数名 | 类型 | 必填 | 说明 | 864| ------ | ------ | ---- | -------------- | 865| showInSubWindow | [Optional](ts-universal-attributes-custom-property.md#optionalt12)\<boolean> | 是 | 设置Select的Menu是否显示在子窗中。<br>true代表Select的Menu显示在子窗中，仅对2in1设备生效。<br>false代表Select的Menu不显示在子窗中。<br>默认值：2in1设备为true，其他设备为false。 | 866 867## ArrowPosition<sup>10+</sup>枚举说明 868 869箭头的位置。 870 871**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 872 873**系统能力：** SystemCapability.ArkUI.ArkUI.Full 874 875| 名称 | 值 | 说明 | 876| ------------------- | ------------------ | ------------------ | 877| END | 0 | 文字在前，箭头在后。 | 878| START | 1 | 箭头在前，文字在后。 | 879 880## MenuAlignType<sup>10+</sup>枚举说明 881 882下拉菜单的对齐方式。 883 884**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 885 886**系统能力：** SystemCapability.ArkUI.ArkUI.Full 887 888| 名称 | 值 | 说明 | 889| ------------------- | --- | ------------------ | 890| START | 0 |按照语言方向起始端对齐。 | 891| CENTER | 1 |居中对齐。 | 892| END | 2 |按照语言方向末端对齐。 | 893 894## AvoidanceMode<sup>19+</sup>枚举说明 895 896下拉菜单避让模式的枚举选项。 897 898**原子化服务API：** 从API version 19开始，该接口支持在原子化服务中使用。 899 900**系统能力：** SystemCapability.ArkUI.ArkUI.Full 901 902| 名称 | 说明 | 903| ------------------- | ------------------ | 904| COVER_TARGET | 目标组件下方无足够空间时，覆盖目标组件。 | 905| AVOID_AROUND_TARGET | 目标组件四周无足够空间时，在最大空间处压缩显示（可滚动）。 | 906 907## MenuItemConfiguration<sup>12+</sup>对象说明 908 909开发者需要自定义class实现ContentModifier接口。继承自[CommonConfiguration](ts-universal-attributes-content-modifier.md#commonconfigurationt)。 910 911**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 912 913**系统能力：** SystemCapability.ArkUI.ArkUI.Full 914 915| 名称 | 类型 | 只读 | 可选 | 说明 | 916| ------ | -------------------------------------------- | ---- | ------------------------------------------------------------ | ------------------------------------------------------------ | 917| value | [ResourceStr](ts-types.md#resourcestr) | 否 | 否 | 下拉菜单项的文本内容。<br/>**说明：** 当文本字符的长度超过菜单项文本区域的宽度时，文本将会被截断。 | 918| icon | [ResourceStr](ts-types.md#resourcestr) | 否 | 是 | 下拉菜单项的图片内容。<br/>**说明：** string格式可用于加载网络图片和本地图片。 | 919| symbolIcon<sup>12+</sup> | [SymbolGlyphModifier](ts-universal-attributes-attribute-symbolglyphmodifier.md) | 否 | 是 | 下拉选项Symbol图片内容。| 920| selected | boolean | 否 | 否 | 下拉菜单项是否被选中。值为true表示选中，值为false表示未选中。<br/>默认值：false | 921| index | number | 否 | 否 | 下拉菜单项的索引，索引值从0开始。 | 922| triggerSelect | (index: number, value: string) :void | 否 | 否 | 下拉菜单选中某一项的回调函数。<br/>index：选中菜单项的索引。<br/>value：选中菜单项的文本。<br/>说明：index会赋值给事件[onSelect](#onselect)回调中的索引参数； value会返回给Select组件显示，同时会赋值给事件[onSelect](#onselect)回调中的文本参数。 | 923 924## MenuOutlineOptions<sup>20+</sup>对象说明 925 926下拉菜单框的外描边参数对象。 927 928**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 929 930**系统能力：** SystemCapability.ArkUI.ArkUI.Full 931 932| 名称 | 类型 |只读 |可选 | 说明 | 933| ------ | ----------------------|-------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | 934| width | [Dimension](ts-types.md#dimension10) \| [EdgeOutlineWidths](ts-types.md#edgeoutlinewidths11对象说明)| 否| 是 | 设置外描边宽度，不支持百分比。<br/>默认值：0 | 935| color | [ResourceColor](ts-types.md#resourcecolor) \| [EdgeColors](ts-types.md#edgecolors9)|否 |是 | 设置外描边颜色。<br/>默认值：#19ffffff| 936 937## 事件 938 939### onSelect 940 941onSelect(callback: (index: number, value: string) => void) 942 943下拉菜单选中某一项的回调。 944 945**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 946 947**系统能力：** SystemCapability.ArkUI.ArkUI.Full 948 949**参数：** 950 951| 参数名 | 类型 | 必填 | 说明 | 952| ------ | ------ | ---- | ----------------------------- | 953| index | number | 是 | 选中项的索引，索引值从0开始。 | 954| value | string | 是 | 选中项的值。 | 955 956### onSelect<sup>18+</sup> 957 958onSelect(callback: Optional\<OnSelectCallback> ) 959 960下拉菜单选中某一项的回调。与[onSelect](#onselect)相比，callback参数新增了对undefined类型的支持。 961 962**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 963 964**系统能力：** SystemCapability.ArkUI.ArkUI.Full 965 966**参数：** 967 968| 参数名 | 类型 | 必填 | 说明 | 969| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 970| callback | [Optional](ts-universal-attributes-custom-property.md#optionalt12)\<[OnSelectCallback](#onselectcallback18)> | 是 | 下拉菜单选中某一项的回调。<br/>当callback的值为undefined时，不使用回调函数。 | 971 972## OnSelectCallback<sup>18+</sup> 973 974type OnSelectCallback = (index: number, selectStr: string) => void 975 976下拉菜单选中某一项的回调。 977 978**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 979 980**系统能力：** SystemCapability.ArkUI.ArkUI.Full 981 982**参数：** 983 984| 参数名 | 类型 | 必填 | 说明 | 985| ------ | ------ | ---- | -------------- | 986| index | number | 是 | 选中项的索引，索引值从0开始。 | 987| selectStr | string | 是 | 选中项的值。 | 988 989## 示例1（设置下拉菜单） 990 991该示例通过配置SelectOptions实现下拉菜单。 992 993```ts 994// xxx.ets 995@Entry 996@Component 997struct SelectExample { 998 @State text: string = "TTTTT"; 999 @State index: number = 2; 1000 @State space: number = 8; 1001 @State arrowPosition: ArrowPosition = ArrowPosition.END; 1002 1003 build() { 1004 Column() { 1005 // $r('app.media.selection')需要替换为开发者所需的图像资源文件。 1006 Select([{ value: 'aaa', icon: $r("app.media.selection") }, 1007 { value: 'bbb', icon: $r("app.media.selection") }, 1008 { value: 'ccc', icon: $r("app.media.selection") }, 1009 { value: 'ddd', icon: $r("app.media.selection") }]) 1010 .selected(this.index) 1011 .value(this.text) 1012 .font({ size: 16, weight: 500 }) 1013 .fontColor('#182431') 1014 .selectedOptionFont({ size: 16, weight: 400 }) 1015 .optionFont({ size: 16, weight: 400 }) 1016 .space(this.space) 1017 .arrowPosition(this.arrowPosition) 1018 .menuAlign(MenuAlignType.START, { dx: 0, dy: 0 }) 1019 .optionWidth(200) 1020 .optionHeight(300) 1021 .onSelect((index: number, text?: string | undefined) => { 1022 console.info('Select:' + index); 1023 this.index = index; 1024 if (text) { 1025 this.text = text; 1026 } 1027 }) 1028 .avoidance(AvoidanceMode.COVER_TARGET); 1029 }.width('100%') 1030 } 1031} 1032``` 1033 1034 1035 1036 1037 1038## 示例2（设置symbol类型图标） 1039该示例实现了一个下拉菜单中图片为Symbol的Select组件。 1040 1041```ts 1042// xxx.ets 1043import { SymbolGlyphModifier } from '@kit.ArkUI'; 1044 1045@Entry 1046@Component 1047struct SelectExample { 1048 @State text: string = "TTTTT"; 1049 @State index: number = 2; 1050 @State space: number = 8; 1051 @State arrowPosition: ArrowPosition = ArrowPosition.END; 1052 @State symbolModifier1: SymbolGlyphModifier = 1053 new SymbolGlyphModifier($r('sys.symbol.ohos_wifi')).fontColor([Color.Green]); 1054 @State symbolModifier2: SymbolGlyphModifier = 1055 new SymbolGlyphModifier($r('sys.symbol.ohos_star')).fontColor([Color.Red]); 1056 @State symbolModifier3: SymbolGlyphModifier = 1057 new SymbolGlyphModifier($r('sys.symbol.ohos_trash')).fontColor([Color.Gray]); 1058 @State symbolModifier4: SymbolGlyphModifier = 1059 new SymbolGlyphModifier($r('sys.symbol.exposure')).fontColor([Color.Gray]); 1060 1061 build() { 1062 Column() { 1063 Select([{ value: 'aaa', symbolIcon: this.symbolModifier1 }, 1064 { value: 'bbb', symbolIcon: this.symbolModifier2 }, 1065 { value: 'ccc', symbolIcon: this.symbolModifier3 }, 1066 { value: 'ddd', symbolIcon: this.symbolModifier4 }]) 1067 .selected(this.index) 1068 .value(this.text) 1069 .font({ size: 16, weight: 500 }) 1070 .fontColor('#182431') 1071 .selectedOptionFont({ size: 16, weight: 400 }) 1072 .optionFont({ size: 16, weight: 400 }) 1073 .space(this.space) 1074 .arrowPosition(this.arrowPosition) 1075 .menuAlign(MenuAlignType.START, { dx: 0, dy: 0 }) 1076 .onSelect((index: number, text?: string | undefined) => { 1077 console.info('Select:' + index); 1078 this.index = index; 1079 if (text) { 1080 this.text = text; 1081 } 1082 }) 1083 .avoidance(AvoidanceMode.COVER_TARGET); 1084 }.width('100%') 1085 } 1086} 1087``` 1088 1089 1090 1091## 示例3（自定义下拉菜单） 1092该示例实现了一个自定义下拉菜选项的Select组件。自定义下拉菜单选项样式为“文本 + Symbol图片 + 空白间隔 + 文本 + 绘制三角形”，点击菜单选项后Select组件显示菜单选项的文本内容。 1093 1094```ts 1095import { SymbolGlyphModifier } from '@kit.ArkUI'; 1096 1097class MyMenuItemContentModifier implements ContentModifier<MenuItemConfiguration> { 1098 modifierText: string = ""; 1099 1100 constructor(text: string) { 1101 this.modifierText = text; 1102 } 1103 1104 applyContent(): WrappedBuilder<[MenuItemConfiguration]> { 1105 return wrapBuilder(MenuItemBuilder); 1106 } 1107} 1108 1109@Builder 1110function MenuItemBuilder(configuration: MenuItemConfiguration) { 1111 Row() { 1112 Text(configuration.value) 1113 Blank() 1114 if (configuration.symbolIcon) { 1115 SymbolGlyph().attributeModifier(configuration.symbolIcon).fontSize(24) 1116 } else if (configuration.icon) { 1117 Image(configuration.icon).size({ width: 24, height: 24 }) 1118 } 1119 Blank(30) 1120 Text((configuration.contentModifier as MyMenuItemContentModifier).modifierText) 1121 Blank(30) 1122 Path() 1123 .width('100px') 1124 .height('150px') 1125 .commands('M40 0 L80 100 L0 100 Z') 1126 .fillOpacity(0) 1127 .stroke(Color.Black) 1128 .strokeWidth(3) 1129 } 1130 .onClick(() => { 1131 configuration.triggerSelect(configuration.index, configuration.value.valueOf().toString()); 1132 }) 1133} 1134 1135@Entry 1136@Component 1137struct SelectExample { 1138 @State text: string = "Content Modifier Select"; 1139 @State symbolModifier1: SymbolGlyphModifier = 1140 new SymbolGlyphModifier($r('sys.symbol.ohos_trash')).fontColor([Color.Gray]); 1141 @State symbolModifier2: SymbolGlyphModifier = 1142 new SymbolGlyphModifier($r('sys.symbol.exposure')).fontColor([Color.Gray]); 1143 1144 build() { 1145 Column() { 1146 Row() { 1147 // $r('app.media.icon')需要替换为开发者所需的图像资源文件。 1148 Select([{ value: 'item1', icon: $r('app.media.icon'), symbolIcon: this.symbolModifier1 }, 1149 { value: 'item1', icon: $r('app.media.icon'), symbolIcon: this.symbolModifier2 }]) 1150 .value(this.text) 1151 .onSelect((index: number, text?: string) => { 1152 console.info('Select index:' + index); 1153 console.info('Select text:' + text); 1154 }) 1155 .menuItemContentModifier(new MyMenuItemContentModifier("Content Modifier")) 1156 1157 }.alignItems(VerticalAlign.Center).height('50%') 1158 } 1159 } 1160} 1161``` 1162 1163 1164## 示例4（设置分割线样式） 1165该示例通过配置divider的DividerOptions类型实现分割线样式的下拉菜单。 1166 1167```ts 1168// xxx.ets 1169@Entry 1170@Component 1171struct SelectExample { 1172 @State text: string = "TTTTT"; 1173 @State index: number = -1; 1174 @State arrowPosition: ArrowPosition = ArrowPosition.END; 1175 1176 build() { 1177 Column() { 1178 // $r('app.media.icon')需要替换为开发者所需的图像资源文件。 1179 Select([{ value: 'aaa', icon: $r("app.media.icon") }, 1180 { value: 'bbb', icon: $r("app.media.icon") }, 1181 { value: 'ccc', icon: $r("app.media.icon") }, 1182 { value: 'ddd', icon: $r("app.media.icon") }]) 1183 .selected(this.index) 1184 .value(this.text) 1185 .font({ size: 16, weight: 500 }) 1186 .fontColor('#182431') 1187 .selectedOptionFont({ size: 16, weight: 400 }) 1188 .optionFont({ size: 16, weight: 400 }) 1189 .arrowPosition(this.arrowPosition) 1190 .menuAlign(MenuAlignType.START, { dx: 0, dy: 0 }) 1191 .optionWidth(200) 1192 .optionHeight(300) 1193 .divider({ 1194 strokeWidth: 5, 1195 color: Color.Blue, 1196 startMargin: 10, 1197 endMargin: 10 1198 }) 1199 .onSelect((index: number, text?: string | undefined) => { 1200 console.info('Select:' + index); 1201 this.index = index; 1202 if (text) { 1203 this.text = text; 1204 } 1205 }) 1206 .avoidance(AvoidanceMode.COVER_TARGET); 1207 }.width('100%') 1208 } 1209} 1210``` 1211 1212 1213## 示例5（设置无分割线样式） 1214该示例通过配置divider为null实现无分割线样式的下拉菜单。 1215 1216```ts 1217// xxx.ets 1218@Entry 1219@Component 1220struct SelectExample { 1221 @State text: string = "TTTTT"; 1222 @State index: number = -1; 1223 @State arrowPosition: ArrowPosition = ArrowPosition.END; 1224 1225 build() { 1226 Column() { 1227 // $r('app.media.icon')需要替换为开发者所需的图像资源文件。 1228 Select([{ value: 'aaa', icon: $r("app.media.icon") }, 1229 { value: 'bbb', icon: $r("app.media.icon") }, 1230 { value: 'ccc', icon: $r("app.media.icon") }, 1231 { value: 'ddd', icon: $r("app.media.icon") }]) 1232 .selected(this.index) 1233 .value(this.text) 1234 .font({ size: 16, weight: 500 }) 1235 .fontColor('#182431') 1236 .selectedOptionFont({ size: 16, weight: 400 }) 1237 .optionFont({ size: 16, weight: 400 }) 1238 .arrowPosition(this.arrowPosition) 1239 .menuAlign(MenuAlignType.START, { dx: 0, dy: 0 }) 1240 .optionWidth(200) 1241 .optionHeight(300) 1242 .divider(null) 1243 .onSelect((index: number, text?: string | undefined) => { 1244 console.info('Select:' + index); 1245 this.index = index; 1246 if (text) { 1247 this.text = text; 1248 } 1249 }) 1250 .avoidance(AvoidanceMode.COVER_TARGET); 1251 }.width('100%') 1252 } 1253} 1254``` 1255 1256 1257## 示例6（设置Select中文本和箭头样式） 1258该示例通过textModifier和arrowModifier设置文本以及箭头样式。 1259 1260```ts 1261import { TextModifier, SymbolGlyphModifier } from "@kit.ArkUI"; 1262 1263@Entry 1264@Component 1265struct SelectExample { 1266 @State text: string = "TTTTTTTTTT".repeat(3); 1267 @State index: number = 2; 1268 textModifier: TextModifier = new TextModifier(); 1269 symbolGlyphModifier: SymbolGlyphModifier = new SymbolGlyphModifier(); 1270 1271 aboutToAppear(): void { 1272 this.textModifier 1273 .maxLines(2) 1274 .fontSize(18) 1275 .textAlign(TextAlign.Center) 1276 .fontColor('#333333') 1277 .fontWeight(FontWeight.Medium) 1278 .textOverflow({overflow:TextOverflow.Clip}) 1279 1280 this.symbolGlyphModifier 1281 .fontSize(25) 1282 .fontColor(['#999999']) 1283 } 1284 1285 build() { 1286 Column() { 1287 Select([ 1288 // $r('app.media.startIcon')需要替换为开发者所需的图像资源文件。 1289 { value: 'A very long option text that should be truncated nicely'.repeat(3), icon: $r("app.media.startIcon") }, 1290 { value: 'Option B', icon: $r("app.media.startIcon") }, 1291 { value: 'Option C', icon: $r("app.media.startIcon") }, 1292 { value: 'Option D', icon: $r("app.media.startIcon") } 1293 ]) 1294 .selected(this.index) 1295 .value(this.text) 1296 .textModifier(this.textModifier) 1297 .arrowModifier(this.symbolGlyphModifier) 1298 .onSelect((index: number, text?: string) => { 1299 console.info('Select:' + index); 1300 this.index = index; 1301 if (text) { 1302 this.text = text; 1303 } 1304 }) 1305 .margin({ top: 20,left:30 }) 1306 .borderRadius(12) 1307 .width(200) 1308 .padding(9) 1309 .backgroundColor(Color.White) 1310 .shadow({ radius: 10, color: '#888888', offsetX: 0, offsetY: 10 }) 1311 } 1312 .alignItems(HorizontalAlign.Start) 1313 .padding(10) 1314 .backgroundColor('#F0F2F5') 1315 .width('100%') 1316 .height('100%') 1317 } 1318} 1319 1320``` 1321 1322 1323## 示例7（设置Select下拉菜单选中和非选中项文本样式） 1324该示例通过optionTextModifier和selectedOptionTextModifier设置下拉菜单选中和非选中项文本样式。 1325 1326```ts 1327import { TextModifier } from "@kit.ArkUI"; 1328 1329@Entry 1330@Component 1331struct SelectExample { 1332 @State text: string = "TTTTTTTTTT".repeat(3); 1333 @State index: number = 2; 1334 optionTextModifier: TextModifier = new TextModifier(); 1335 selectedOptionTextModifier: TextModifier = new TextModifier(); 1336 aboutToAppear(): void { 1337 this.optionTextModifier 1338 .maxLines(1) 1339 .fontSize(16) 1340 .textAlign(TextAlign.Start) 1341 .fontColor('#666666') 1342 .fontWeight(FontWeight.Normal) 1343 .width(200) 1344 1345 this.selectedOptionTextModifier 1346 .maxLines(1) 1347 .fontSize(18) 1348 .textAlign(TextAlign.Start) 1349 .fontColor('#007BFF') 1350 .fontWeight(FontWeight.Bold) 1351 .width(200) 1352 } 1353 1354 build() { 1355 Column() { 1356 Select([ 1357 // $r('app.media.startIcon')需要替换为开发者所需的图像资源文件。 1358 { value: 'A very long option text that should be truncated nicely'.repeat(3), icon: $r("app.media.startIcon") }, 1359 { value: 'Option B', icon: $r("app.media.startIcon") }, 1360 { value: 'Option C', icon: $r("app.media.startIcon") }, 1361 { value: 'Option D', icon: $r("app.media.startIcon") } 1362 ]) 1363 .selected(this.index) 1364 .value(this.text) 1365 .onSelect((index: number, text?: string) => { 1366 console.info('Select:' + index); 1367 this.index = index; 1368 if (text) { 1369 this.text = text; 1370 } 1371 }) 1372 .optionTextModifier(this.optionTextModifier) 1373 .selectedOptionTextModifier(this.selectedOptionTextModifier) 1374 .margin({ top: 20,left:30 }) 1375 .borderRadius(12) 1376 .width(200) 1377 .padding(9) 1378 .backgroundColor(Color.White) 1379 .shadow({ radius: 10, color: '#888888', offsetX: 0, offsetY: 10 }) 1380 } 1381 .alignItems(HorizontalAlign.Start) 1382 .padding(10) 1383 .backgroundColor('#F0F2F5') 1384 .width('100%') 1385 .height('100%') 1386 } 1387} 1388 1389``` 1390 1391 1392## 示例8（设置分割线模式） 1393 1394该示例通过配置dividerStyle的mode属性设置分割线模式。 1395 1396```ts 1397import { LengthMetrics } from '@kit.ArkUI' 1398 1399@Entry 1400@Component 1401struct Index { 1402 build() { 1403 RelativeContainer() { 1404 Select([{ value: "SelectItem" }, { value: "SelectItem" }, { value: "SelectItem" },]) 1405 .value("请选择") 1406 .dividerStyle({ 1407 strokeWidth: LengthMetrics.vp(5), 1408 color: '#d5d5d5', 1409 mode: DividerMode.EMBEDDED_IN_MENU 1410 }) 1411 } 1412 .height('100%') 1413 .width('100%') 1414 } 1415} 1416``` 1417 1418 1419 1420## 示例9（设置Select下拉菜单外描边样式） 1421 1422该示例通过配置menuOutline的width和color属性设置下拉菜单外描边样式。 1423 1424```ts 1425// xxx.ets 1426@Entry 1427@Component 1428struct SelectExample { 1429 @State text: string = "TTTTT"; 1430 @State index: number = -1; 1431 @State arrowPosition: ArrowPosition = ArrowPosition.END; 1432 1433 build() { 1434 Column() { 1435 Select([{ value: 'aaa' }, 1436 { value: 'bbb' }, 1437 { value: 'ccc' }, 1438 { value: 'ddd' }]) 1439 .selected(this.index) 1440 .value(this.text) 1441 .font({ size: 16, weight: 500 }) 1442 .fontColor('#182431') 1443 .selectedOptionFont({ size: 16, weight: 400 }) 1444 .optionFont({ size: 16, weight: 400 }) 1445 .arrowPosition(this.arrowPosition) 1446 .menuAlign(MenuAlignType.START, { dx: 0, dy: 0 }) 1447 .optionWidth(200) 1448 .optionHeight(300) 1449 .menuOutline({ 1450 width: '5vp', 1451 color: Color.Blue 1452 }) 1453 .onSelect((index: number, text?: string | undefined) => { 1454 console.info('Select:' + index); 1455 this.index = index; 1456 if (text) { 1457 this.text = text; 1458 } 1459 }) 1460 } 1461 .width('100%') 1462 .height('100%') 1463 .backgroundColor('#F0F2F5') 1464 } 1465} 1466``` 1467 1468
