1# Select 2 3提供下拉选择菜单，可以让用户在多个选项之间选择。 4 5> **说明：** 6> 7> 该组件从API version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9## 子组件 10 11无 12 13## 接口 14 15Select(options: Array\<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-component-general-attributes.md)外，还支持以下属性： 40 41### selected 42 43selected(value: number | Resource) 44 45设置下拉菜单初始选项的索引，第一项的索引为0。当不设置selected属性或设置异常值时，默认选择值为-1，菜单项不选中；当设置为undefined、null时，选中第一项。 46 47从API version 10开始，该属性支持[$$](../../../ui/state-management/arkts-two-way-sync.md)双向绑定变量。 48从API version 18开始，该参数支持[!!](../../../ui/state-management/arkts-new-binding.md#系统组件参数双向绑定)双向绑定变量。 49 50**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 51 52**系统能力：** SystemCapability.ArkUI.ArkUI.Full 53 54**参数：** 55 56| 参数名 | 类型 | 必填 | 说明 | 57| ------ | ------------------------------------------------------------ | ---- | ------------------------ | 58| value | number \| [Resource](ts-types.md#resource)<sup>11+</sup> | 是 | 下拉菜单初始选项的索引，索引值从0开始。 | 59 60### selected<sup>18+</sup> 61 62selected(numCount: Optional<number | Resource>) 63 64设置下拉菜单初始选项的索引，第一项的索引为0。当不设置selected属性或设置异常值时，默认选择值为-1，菜单项不选中；当设置为undefined、null时，选中第一项。 65 66该属性支持[$$](../../../ui/state-management/arkts-two-way-sync.md)双向绑定变量。 67该属性支持[!!](../../../ui/state-management/arkts-new-binding.md#系统组件参数双向绑定)双向绑定变量。 68 69**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 70 71**系统能力：** SystemCapability.ArkUI.ArkUI.Full 72 73**参数：** 74 75| 参数名 | 类型 | 必填 | 说明 | 76| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 77| numCount | [Optional](ts-universal-attributes-custom-property.md#optional12)\<number \| [Resource](ts-types.md#resource)> | 是 | 下拉菜单初始选项的索引。<br/>当numCount的值为undefined时，选中第一项。 | 78 79### value 80 81value(value: ResourceStr) 82 83设置下拉按钮本身的文本内容。当菜单选中时默认会替换为菜单项文本内容。 84 85从API version 10开始，该参数支持[$$](../../../ui/state-management/arkts-two-way-sync.md)双向绑定变量。 86从API version 18开始，该参数支持[!!](../../../ui/state-management/arkts-new-binding.md#系统组件参数双向绑定)双向绑定变量。 87 88**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 89 90**系统能力：** SystemCapability.ArkUI.ArkUI.Full 91 92**参数：** 93 94| 参数名 | 类型 | 必填 | 说明 | 95| ------ | ---------------------------------------------------- | ---- | ------------------------ | 96| value | [ResourceStr](ts-types.md#resourcestr)<sup>11+</sup> | 是 | 下拉按钮本身的文本内容。<br/>**说明**：文本长度大于列宽时，文本被截断。 | 97 98### value<sup>18+</sup> 99 100value(resStr: Optional\<ResourceStr>) 101 102设置下拉按钮本身的文本内容。当菜单选中时默认会替换为菜单项文本内容。与[value](#value)相比，resStr参数新增了对undefined类型的支持。 103 104该参数支持[$$](../../../ui/state-management/arkts-two-way-sync.md)双向绑定变量。 105该参数支持[!!](../../../ui/state-management/arkts-new-binding.md#系统组件参数双向绑定)双向绑定变量。 106 107**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 108 109**系统能力：** SystemCapability.ArkUI.ArkUI.Full 110 111**参数：** 112 113| 参数名 | 类型 | 必填 | 说明 | 114| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 115| resStr | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[ResourceStr](ts-types.md#resourcestr)> | 是 | 下拉按钮本身的文本内容。<br/>当resStr的值为undefined时维持上次取值。 | 116 117### controlSize<sup>12+</sup> 118 119controlSize(value: ControlSize) 120 121设置Select组件的尺寸。 122 123**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 124 125**系统能力：** SystemCapability.ArkUI.ArkUI.Full 126 127**参数：** 128 129| 参数名 | 类型 | 必填 | 说明 | 130| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------- | 131| value | [ControlSize](ts-basic-components-button.md#controlsize11枚举说明)<sup>11+</sup> | 是 | Select组件的尺寸。<br/>默认值：ControlSize.NORMAL | 132 133controlSize、width、height接口作用优先级： 134 135 1）如果开发者只设置了width和height，当文字大小设置的是比较大的值的时候，文字超出组件大小，且以省略号方式显示； 136 137 2）如果开发者只设置了controlSize，没有设置width和height，组件宽高自适应文字，文字不超出组件，并设置最小宽度minWidth和最小高度minHeight； 138 139 3）如果controlSize、width、height接口都设置了，width和height设置的值生效，但如果width和height设置的值小于controlSize设置的最小宽度minWidth和最小高度minHeight，width和height设置的值不生效，宽高仍保持controlSize设置的最小宽度minWidth和最小高度minHeight。 140 141### controlSize<sup>18+</sup> 142 143controlSize(size: Optional\<ControlSize>) 144 145设置Select组件的尺寸。与[controlSize](#controlsize12)<sup>12+</sup>相比，size参数新增了对undefined类型的支持。 146 147**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 148 149**系统能力：** SystemCapability.ArkUI.ArkUI.Full 150 151**参数：** 152 153| 参数名 | 类型 | 必填 | 说明 | 154| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 155| size | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[ControlSize](ts-basic-components-button.md#controlsize11枚举说明)> | 是 | Select组件的尺寸。<br/>当size的值为undefined时，默认值为ControlSize.NORMAL。 | 156 157controlSize、width、height接口作用优先级： 158 159 1）如果开发者只设置了width和height，当文字大小设置的是比较大的值的时候，文字超出组件大小，且以省略号方式显示； 160 161 2）如果开发者只设置了controlSize，没有设置width和height，组件宽高自适应文字，文字不超出组件，并设置最小宽度minWidth和最小高度minHeight； 162 163 3）如果controlSize、width、height接口都设置了，width和height设置的值生效，但如果width和height设置的值小于controlSize设置的最小宽度minWidth和最小高度minHeight，width和height设置的值不生效，宽高仍保持controlSize设置的最小宽度minWidth和最小高度minHeight。 164 165### menuItemContentModifier<sup>12+</sup> 166 167menuItemContentModifier(modifier: ContentModifier\<MenuItemConfiguration>) 168 169定制Select下拉菜单项内容区的方法。在应用了menuItemContentModifier后，下拉菜单的内容将完全由开发者自定义，此时为Select组件设置的分割线、选项颜色及下拉菜单的字体颜色等属性将不再生效。 170 171**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 172 173**系统能力：** SystemCapability.ArkUI.ArkUI.Full 174 175**参数：** 176 177| 参数名 | 类型 | 必填 | 说明 | 178| ------ | --------------------------------------------- | ---- | ------------------------------------------------ | 179| modifier | [ContentModifier\<MenuItemConfiguration>](#menuitemconfiguration12对象说明) | 是 | 在Select组件上，定制下拉菜单项内容区的方法。<br/>modifier：内容修改器，开发者需要自定义class实现ContentModifier接口。 | 180 181### menuItemContentModifier<sup>18+</sup> 182 183menuItemContentModifier(modifier: Optional\<ContentModifier\<MenuItemConfiguration>>) 184 185定制Select下拉菜单项内容区的方法。与[menuItemContentModifier](#menuitemcontentmodifier12)<sup>12+</sup>相比，modifier参数新增了对undefined类型的支持。在应用了menuItemContentModifier后，下拉菜单的内容将完全由开发者自定义，此时为Select组件设置的分割线、选项颜色及下拉菜单的字体颜色等属性将不再生效。 186 187**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 188 189**系统能力：** SystemCapability.ArkUI.ArkUI.Full 190 191**参数：** 192 193| 参数名 | 类型 | 必填 | 说明 | 194| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 195| modifier | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[ContentModifier\<MenuItemConfiguration>](#menuitemconfiguration12对象说明)> | 是 | 在Select组件上，定制下拉菜单项内容区的方法。<br/>modifier：内容修改器，开发者需要自定义class实现ContentModifier接口。<br/>当modifier的值为undefined时，不使用内容修改器。 | 196 197### divider<sup>12+</sup> 198 199divider(options: Optional\<DividerOptions> | null) 200 201设置分割线样式，不设置该属性则按“默认值”展示分割线。 202 203**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 204 205**系统能力：** SystemCapability.ArkUI.ArkUI.Full 206 207**参数：** 208| 参数名 | 类型 | 必填 | 说明 | 209| ------ | ------- | ---- | --------------------------------------------------------------------- | 210| 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的值时，按照默认样式显示分割线。| 211 212### font 213 214font(value: Font) 215 216设置下拉按钮本身的文本样式。当size为0的时候，文本不显示，当size为负值的时候，文本的size按照默认值显示。 217 218**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 219 220**系统能力：** SystemCapability.ArkUI.ArkUI.Full 221 222**参数：** 223 224| 参数名 | 类型 | 必填 | 说明 | 225| ------ | ------------------------ | ---- | ------------------------------------------------------------ | 226| 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')`。 | 227 228### font<sup>18+</sup> 229 230font(selectFont: Optional\<Font>) 231 232设置下拉按钮本身的文本样式。当size为0的时候，文本不显示，当size为负值的时候，文本的size按照默认值显示。与[font](#font)相比，selectFont参数新增了对undefined类型的支持。 233 234**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 235 236**系统能力：** SystemCapability.ArkUI.ArkUI.Full 237 238**参数：** 239 240| 参数名 | 类型 | 必填 | 说明 | 241| ---------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 242| selectFont | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[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时，恢复为系统文本样式。 | 243 244### fontColor 245 246fontColor(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')`混合`$r('sys.color.ohos_id_alpha_content_primary')`的透明度。 | 259 260### fontColor<sup>18+</sup> 261 262fontColor(resColor: Optional\<ResourceColor>) 263 264设置下拉按钮本身的文本颜色。与[fontColor](#fontcolor)相比，resColor参数新增了对undefined类型的支持。 265 266**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 267 268**系统能力：** SystemCapability.ArkUI.ArkUI.Full 269 270**参数：** 271 272| 参数名 | 类型 | 必填 | 说明 | 273| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 274| resColor | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[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时，维持上次取值。 | 275 276### selectedOptionBgColor 277 278selectedOptionBgColor(value: ResourceColor) 279 280设置下拉菜单选中项的背景色。 281 282**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 283 284**系统能力：** SystemCapability.ArkUI.ArkUI.Full 285 286**参数：** 287 288| 参数名 | 类型 | 必填 | 说明 | 289| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ | 290| value | [ResourceColor](ts-types.md#resourcecolor) | 是 | 下拉菜单选中项的背景色。<br/>默认值：`$r('sys.color.ohos_id_color_component_activated')`混合`$r('sys.color.ohos_id_alpha_highlight_bg')`的透明度。 | 291 292### selectedOptionBgColor<sup>18+</sup> 293 294selectedOptionBgColor(resColor: Optional\<ResourceColor>) 295 296设置下拉菜单选中项的背景色。与[selectedOptionBgColor](#selectedoptionbgcolor)相比，resColor参数新增了对undefined类型的支持。 297 298**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 299 300**系统能力：** SystemCapability.ArkUI.ArkUI.Full 301 302**参数：** 303 304| 参数名 | 类型 | 必填 | 说明 | 305| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 306| resColor | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[ResourceColor](ts-types.md#resourcecolor)> | 是 | 下拉菜单选中项的背景色。<br/>当resColor的值为undefined时，默认值：`$r('sys.color.ohos_id_color_component_activated')`混合`$r('sys.color.ohos_id_alpha_highlight_bg')`的透明度。 | 307 308### selectedOptionFont 309 310selectedOptionFont(value: Font) 311 312设置下拉菜单选中项的文本样式。当size为0的时候，文本不显示，当size为负值的时候，文本的size按照默认值显示。 313 314**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 315 316**系统能力：** SystemCapability.ArkUI.ArkUI.Full 317 318**参数：** 319 320| 参数名 | 类型 | 必填 | 说明 | 321| ------ | ------------------------ | ---- | ------------------------------------------------------------ | 322| value | [Font](ts-types.md#font) | 是 | 下拉菜单选中项的文本样式。<br/>默认值：<br/>{<br/>size: $r('sys.float.ohos_id_text_size_body1'),<br/>weight: FontWeight.Regular<br/>} | 323 324### selectedOptionFont<sup>18+</sup> 325 326selectedOptionFont(selectFont: Optional\<Font>) 327 328设置下拉菜单选中项的文本样式。当size为0的时候，文本不显示，当size为负值的时候，文本的size按照默认值显示。与[selectedOptionFont](#selectedoptionfont)相比，selectFont参数新增了对undefined类型的支持。 329 330**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 331 332**系统能力：** SystemCapability.ArkUI.ArkUI.Full 333 334**参数：** 335 336| 参数名 | 类型 | 必填 | 说明 | 337| ---------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 338| selectFont | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[Font](ts-types.md#font)> | 是 | 下拉菜单选中项的文本样式。<br/>当selectFont的值为undefined时，默认值：<br/>{<br/>size: $r('sys.float.ohos_id_text_size_body1'),<br/>weight: FontWeight.Regular<br/>} | 339 340### selectedOptionFontColor 341 342selectedOptionFontColor(value: ResourceColor) 343 344设置下拉菜单选中项的文本颜色。 345 346**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 347 348**系统能力：** SystemCapability.ArkUI.ArkUI.Full 349 350**参数：** 351 352| 参数名 | 类型 | 必填 | 说明 | 353| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ | 354| value | [ResourceColor](ts-types.md#resourcecolor) | 是 | 下拉菜单选中项的文本颜色。<br/>默认值：$r('sys.color.ohos_id_color_text_primary_activated') | 355 356### selectedOptionFontColor<sup>18+</sup> 357 358selectedOptionFontColor(resColor: Optional\<ResourceColor>) 359 360设置下拉菜单选中项的文本颜色。与[selectedOptionFontColor](#selectedoptionfontcolor)相比，resColor参数新增了对undefined类型的支持。 361 362**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 363 364**系统能力：** SystemCapability.ArkUI.ArkUI.Full 365 366**参数：** 367 368| 参数名 | 类型 | 必填 | 说明 | 369| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 370| resColor | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[ResourceColor](ts-types.md#resourcecolor)> | 是 | 下拉菜单选中项的文本颜色。<br/>当resColor的值为undefined时，默认值：$r('sys.color.ohos_id_color_text_primary_activated') | 371 372### optionBgColor 373 374optionBgColor(value: ResourceColor) 375 376设置下拉菜单项的背景色。 377 378**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 379 380**系统能力：** SystemCapability.ArkUI.ArkUI.Full 381 382**参数：** 383 384| 参数名 | 类型 | 必填 | 说明 | 385| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ | 386| value | [ResourceColor](ts-types.md#resourcecolor) | 是 | 下拉菜单项的背景色。<br/>默认值：<br/>API version 11之前，默认值为Color.White。<br/>API version 11及之后，默认值为Color.Transparent。 | 387 388### optionBgColor<sup>18+</sup> 389 390optionBgColor(resColor: Optional\<ResourceColor>) 391 392设置下拉菜单项的背景色。与[optionBgColor](#optionbgcolor)相比，resColor参数新增了对undefined类型的支持。 393 394**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 395 396**系统能力：** SystemCapability.ArkUI.ArkUI.Full 397 398**参数：** 399 400| 参数名 | 类型 | 必填 | 说明 | 401| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 402| resColor | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[ResourceColor](ts-types.md#resourcecolor)> | 是 | 下拉菜单项的背景色。<br/>当resColor的值为undefined时，默认值为Color.Transparent。 | 403 404### optionFont 405 406optionFont(value: Font) 407 408设置下拉菜单项的文本样式。当size为0的时候，文本不显示，当size为负值的时候，文本的size按照默认值显示。 409 410**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 411 412**系统能力：** SystemCapability.ArkUI.ArkUI.Full 413 414**参数：** 415 416| 参数名 | 类型 | 必填 | 说明 | 417| ------ | ------------------------ | ---- | ------------------------------------------------------------ | 418| value | [Font](ts-types.md#font) | 是 | 下拉菜单项的文本样式。<br/>默认值：<br/>{<br/>size: $r('sys.float.ohos_id_text_size_body1'),<br/>weight: FontWeight.Regular<br/>} | 419 420### optionFont<sup>18+</sup> 421 422optionFont(selectFont: Optional\<Font>) 423 424设置下拉菜单项的文本样式。当size为0的时候，文本不显示，当size为负值的时候，文本的size按照默认值显示。 425 426与[optionFont](#optionfont)相比，selectFont参数新增了对undefined类型的支持。 427 428**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 429 430**系统能力：** SystemCapability.ArkUI.ArkUI.Full 431 432**参数：** 433 434| 参数名 | 类型 | 必填 | 说明 | 435| ---------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 436| selectFont | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[Font](ts-types.md#font)> | 是 | 下拉菜单项的文本样式。<br/>当selectFont的值为undefined时，默认值：<br/>{<br/>size: $r('sys.float.ohos_id_text_size_body1'),<br/>weight: FontWeight.Regular<br/>} | 437 438### optionFontColor 439 440optionFontColor(value: ResourceColor) 441 442设置下拉菜单项的文本颜色。 443 444**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 445 446**系统能力：** SystemCapability.ArkUI.ArkUI.Full 447 448**参数：** 449 450| 参数名 | 类型 | 必填 | 说明 | 451| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ | 452| value | [ResourceColor](ts-types.md#resourcecolor) | 是 | 下拉菜单项的文本颜色。<br/>默认值：$r('sys.color.ohos_id_color_text_primary') | 453 454### optionFontColor<sup>18+</sup> 455 456optionFontColor(resColor: Optional\<ResourceColor>) 457 458设置下拉菜单项的文本颜色。与[optionFontColor](#optionfontcolor)相比，resColor参数新增了对undefined类型的支持。 459 460**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 461 462**系统能力：** SystemCapability.ArkUI.ArkUI.Full 463 464**参数：** 465 466| 参数名 | 类型 | 必填 | 说明 | 467| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 468| resColor | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[ResourceColor](ts-types.md#resourcecolor)> | 是 | 下拉菜单项的文本颜色。<br/>当resColor的值为undefined时，默认值：$r('sys.color.ohos_id_color_text_primary') | 469 470### space<sup>10+</sup> 471 472space(value: Length) 473 474设置下拉菜单项的文本与箭头之间的间距。不支持设置百分比。设置为null、undefined，或者小于等于8的值，取默认值。 475 476**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 477 478**系统能力：** SystemCapability.ArkUI.ArkUI.Full 479 480**参数：** 481 482| 参数名 | 类型 | 必填 | 说明 | 483| ------ | ---------------------------- | ---- | ------------------------------------------------ | 484| value | [Length](ts-types.md#length) | 是 | 下拉菜单项的文本与箭头之间的间距。<br/>默认值：8<br/>**说明**：设置string类型时，不支持百分比。 | 485 486### space<sup>18+</sup> 487 488space(spaceLength: Optional\<Length>) 489 490设置下拉菜单项的文本与箭头之间的间距。不支持设置百分比。设置为null、undefined，或者小于等于8的值，取默认值。 491 492**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 493 494**系统能力：** SystemCapability.ArkUI.ArkUI.Full 495 496**参数：** 497 498| 参数名 | 类型 | 必填 | 说明 | 499| ----------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 500| spaceLength | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[Length](ts-types.md#length)> | 是 | 下拉菜单项的文本与箭头之间的间距。<br/>当spaceLength的值为undefined时，默认值：8 | 501 502### arrowPosition<sup>10+</sup> 503 504arrowPosition(value: ArrowPosition) 505 506设置下拉菜单项的文本与箭头之间的对齐方式。 507 508**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 509 510**系统能力：** SystemCapability.ArkUI.ArkUI.Full 511 512**参数：** 513 514| 参数名 | 类型 | 必填 | 说明 | 515| ------ | ----------------------------------------- | ---- | ------------------------------------------------------------ | 516| value | [ArrowPosition](#arrowposition10枚举说明) | 是 | 下拉菜单项的文本与箭头之间的对齐方式。<br/>默认值：ArrowPosition.END | 517 518### arrowPosition<sup>18+</sup> 519 520arrowPosition(position: Optional\<ArrowPosition>) 521 522设置下拉菜单项的文本与箭头之间的对齐方式。与[arrowPosition](#arrowposition10)相比，position参数新增了对undefined类型的支持。 523 524**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 525 526**系统能力：** SystemCapability.ArkUI.ArkUI.Full 527 528**参数：** 529 530| 参数名 | 类型 | 必填 | 说明 | 531| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 532| position | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[ArrowPosition](#arrowposition10枚举说明)> | 是 | 下拉菜单项的文本与箭头之间的对齐方式。<br/>当position的值为undefined时，默认值：ArrowPosition.END | 533 534### menuAlign<sup>10+</sup> 535 536menuAlign(alignType: MenuAlignType, offset?: Offset) 537 538设置下拉按钮与下拉菜单间的对齐方式。 539 540**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 541 542**系统能力：** SystemCapability.ArkUI.ArkUI.Full 543 544**参数：** 545 546| 参数名 | 类型 | 必填 | 说明 | 547| --------- | ----------------------------------------- | ---- | ------------------------------------------------------------ | 548| alignType | [MenuAlignType](#menualigntype10枚举说明) | 是 | 对齐方式类型。<br/>默认值：MenuAlignType.START | 549| offset | [Offset](ts-types.md#offset) | 否 | 按照对齐类型对齐后，下拉菜单相对下拉按钮的偏移量。<br/> 默认值：{dx: 0, dy: 0} | 550 551### menuAlign<sup>18+</sup> 552 553menuAlign(alignType: Optional\<MenuAlignType>, offset?: Offset) 554 555设置下拉按钮与下拉菜单间的对齐方式。与[menuAlign](#menualign10)<sup>10+</sup>相比，alignType参数新增了对undefined类型的支持。 556 557**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 558 559**系统能力：** SystemCapability.ArkUI.ArkUI.Full 560 561**参数：** 562 563| 参数名 | 类型 | 必填 | 说明 | 564| --------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 565| alignType | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[MenuAlignType](#menualigntype10枚举说明)> | 是 | 对齐方式类型。<br/>当alignType的值为undefined时，默认值：MenuAlignType.START | 566| offset | [Offset](ts-types.md#offset) | 否 | 按照对齐类型对齐后，下拉菜单相对下拉按钮的偏移量。<br/> 默认值：{dx: 0, dy: 0} | 567 568### optionWidth<sup>11+</sup> 569 570optionWidth(value: Dimension | OptionWidthMode ) 571 572设置下拉菜单项的宽度，不支持设置百分比。OptionWidthMode类型为枚举类型，OptionWidthMode决定下拉菜单是否继承下拉按钮宽度。 573 574当设置为异常值或小于最小宽度56vp时，属性不生效，菜单项宽度设为默认值，即菜单默认宽度为2栅格。 575 576**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 577 578**系统能力：** SystemCapability.ArkUI.ArkUI.Full 579 580**参数：** 581 582| 参数名 | 类型 | 必填 | 说明 | 583| ------ | ------------------------------------------------------------ | ---- | ------------------ | 584| value | [Dimension](ts-types.md#dimension10) \| [OptionWidthMode](ts-appendix-enums.md#optionwidthmode11) | 是 | 下拉菜单项的宽度。 | 585 586### optionWidth<sup>18+</sup> 587 588optionWidth(width: Optional\<Dimension | OptionWidthMode> ) 589 590设置下拉菜单项的宽度，不支持设置百分比。OptionWidthMode类型为枚举类型，OptionWidthMode决定下拉菜单是否继承下拉按钮宽度。与[optionWidth](#optionwidth11)<sup>11+</sup>相比，width参数新增了对undefined类型的支持。 591 592当设置为异常值或小于最小宽度56vp时，属性不生效，菜单项宽度设为默认值，即菜单默认宽度为2栅格。 593 594**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 595 596**系统能力：** SystemCapability.ArkUI.ArkUI.Full 597 598**参数：** 599 600| 参数名 | 类型 | 必填 | 说明 | 601| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 602| width | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[Dimension](ts-types.md#dimension10) \| [OptionWidthMode](ts-appendix-enums.md#optionwidthmode11)> | 是 | 下拉菜单项的宽度。<br/>当width的值为undefined时，属性不生效，菜单项宽度设为默认值，即菜单默认宽度为2栅格。 | 603 604### optionHeight<sup>11+</sup> 605 606optionHeight(value: Dimension) 607 608设置下拉菜单显示的最大高度，不支持设置百分比。下拉菜单的默认最大高度是屏幕可用高度的80%，设置的菜单最大高度不能超过默认最大高度。 609 610当设置为异常值或零时，属性不生效，下拉菜单最大高度设为默认值，即下拉菜单最大高度默认值为屏幕可用高度的80%。 611 612如果下拉菜单所有选项的实际高度没有设定的高度大，下拉菜单的高度按实际高度显示。 613 614**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 615 616**系统能力：** SystemCapability.ArkUI.ArkUI.Full 617 618**参数：** 619 620| 参数名 | 类型 | 必填 | 说明 | 621| ------ | ------------------------------------ | ---- | ------------------------ | 622| value | [Dimension](ts-types.md#dimension10) | 是 | 下拉菜单显示的最大高度。 | 623 624### optionHeight<sup>18+</sup> 625 626optionHeight(height: Optional\<Dimension>) 627 628设置下拉菜单显示的最大高度，不支持设置百分比。下拉菜单的默认最大高度是屏幕可用高度的80%，设置的菜单最大高度不能超过默认最大高度。与[optionHeight](#optionheight11)<sup>11+</sup>相比，height参数新增了对undefined类型的支持。 629 630当设置为异常值或零时，属性不生效，下拉菜单最大高度设为默认值，即下拉菜单最大高度默认值为屏幕可用高度的80%。 631 632如果下拉菜单所有选项的实际高度没有设定的高度大，下拉菜单的高度按实际高度显示。 633 634**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 635 636**系统能力：** SystemCapability.ArkUI.ArkUI.Full 637 638**参数：** 639 640| 参数名 | 类型 | 必填 | 说明 | 641| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 642| height | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[Dimension](ts-types.md#dimension10)> | 是 | 下拉菜单显示的最大高度。<br/>当height的值为undefined时，属性不生效，下拉菜单最大高度设为默认值，即下拉菜单最大高度默认值为屏幕可用高度的80%。 | 643 644### menuBackgroundColor<sup>11+</sup> 645 646menuBackgroundColor(value: ResourceColor) 647 648设置下拉菜单的背景色。 649 650**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 651 652**系统能力：** SystemCapability.ArkUI.ArkUI.Full 653 654**参数：** 655 656| 参数名 | 类型 | 必填 | 说明 | 657| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ | 658| 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。 | 659 660### menuBackgroundColor<sup>18+</sup> 661 662menuBackgroundColor(resColor: Optional\<ResourceColor>) 663 664设置下拉菜单的背景色。与[menuBackgroundColor](#menubackgroundcolor11)<sup>11+</sup>相比，resColor参数新增了对undefined类型的支持。 665 666**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 667 668**系统能力：** SystemCapability.ArkUI.ArkUI.Full 669 670**参数：** 671 672| 参数名 | 类型 | 必填 | 说明 | 673| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 674| resColor | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[ResourceColor](ts-types.md#resourcecolor)> | 是 | 下拉菜单的背景色。<br/>当resColor的值为undefined时，默认值为Color.Transparent。 | 675 676### menuBackgroundBlurStyle<sup>11+</sup> 677 678menuBackgroundBlurStyle(value: BlurStyle) 679 680设置下拉菜单的背景模糊材质。 681 682**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 683 684**系统能力：** SystemCapability.ArkUI.ArkUI.Full 685 686**参数：** 687 688| 参数名 | 类型 | 必填 | 说明 | 689| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 690| value | [BlurStyle](ts-universal-attributes-background.md#blurstyle9) | 是 | 下拉菜单的背景模糊材质。<br/>默认值：BlurStyle.COMPONENT_ULTRA_THICK | 691 692### menuBackgroundBlurStyle<sup>18+</sup> 693 694menuBackgroundBlurStyle(style: Optional\<BlurStyle>) 695 696设置下拉菜单的背景模糊材质。与[menuBackgroundBlurStyle](#menubackgroundblurstyle11)<sup>11+</sup>相比，style参数新增了对undefined类型的支持。 697 698**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 699 700**系统能力：** SystemCapability.ArkUI.ArkUI.Full 701 702**参数：** 703 704| 参数名 | 类型 | 必填 | 说明 | 705| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 706| style | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[BlurStyle](ts-universal-attributes-background.md#blurstyle9)> | 是 | 下拉菜单的背景模糊材质。<br/>当style的值为undefined时，默认值：BlurStyle.COMPONENT_ULTRA_THICK | 707 708## ArrowPosition<sup>10+</sup>枚举说明 709 710**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 711 712**系统能力：** SystemCapability.ArkUI.ArkUI.Full 713 714| 名称 | 值 | 说明 | 715| ------------------- | ------------------ | ------------------ | 716| END | 0 | 文字在前，箭头在后。 | 717| START | 1 | 箭头在前，文字在后。 | 718 719## MenuAlignType<sup>10+</sup>枚举说明 720 721**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 722 723**系统能力：** SystemCapability.ArkUI.ArkUI.Full 724 725| 名称 | 值 | 说明 | 726| ------------------- | --- | ------------------ | 727| START | 0 |按照语言方向起始端对齐。 | 728| CENTER | 1 |居中对齐。 | 729| END | 2 |按照语言方向末端对齐。 | 730 731## MenuItemConfiguration<sup>12+</sup>对象说明 732 733**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 734 735**系统能力：** SystemCapability.ArkUI.ArkUI.Full 736 737| 名称 | 类型 | 必填 | 说明 | 738| ------ | -------------------------------------------- | ---- | ------------------------------------------------------------ | 739| value | [ResourceStr](ts-types.md#resourcestr) | 是 | 下拉菜单项的文本内容。<br/>**说明**：当文本字符的长度超过菜单项文本区域的宽度时，文本将会被截断。 | 740| icon | [ResourceStr](ts-types.md#resourcestr) | 否 | 下拉菜单项的图片内容。<br/>**说明**：string格式可用于加载网络图片和本地图片。 | 741| symbolIcon<sup>12+</sup> | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | 否 | 下拉选项Symbol图片内容。| 742| selected | boolean | 是 | 下拉菜单项是否被选中。<br/>默认值：false | 743| index | number | 是 | 下拉菜单项的索引，索引值从0开始。 | 744| triggerSelect | (index: number, value: string) :void | 是 | 下拉菜单选中某一项的回调函数。<br/>index：选中菜单项的索引。<br/>value：选中菜单项的文本。<br/>说明：index会赋值给事件[onSelect](#onselect)回调中的索引参数； value会返回给Select组件显示，同时会赋值给事件[onSelect](#onselect)回调中的文本参数。 | 745 746## 事件 747 748### onSelect 749 750onSelect(callback: (index: number, value: string) => void) 751 752下拉菜单选中某一项的回调。 753 754**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 755 756**系统能力：** SystemCapability.ArkUI.ArkUI.Full 757 758**参数：** 759 760| 参数名 | 类型 | 必填 | 说明 | 761| ------ | ------ | ---- | ----------------------------- | 762| index | number | 是 | 选中项的索引，索引值从0开始。 | 763| value | string | 是 | 选中项的值。 | 764 765### onSelect<sup>18+</sup> 766 767onSelect(callback: Optional\<OnSelectCallback> ) 768 769下拉菜单选中某一项的回调。与[onSelect](#onselect)相比，callback参数新增了对undefined类型的支持。 770 771**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 772 773**系统能力：** SystemCapability.ArkUI.ArkUI.Full 774 775**参数：** 776 777| 参数名 | 类型 | 必填 | 说明 | 778| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 779| callback | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[OnSelectCallback](#onselectcallback16)> | 是 | 下拉菜单选中某一项的回调。<br/>当callback的值为undefined时，不使用回调函数。 | 780 781## OnSelectCallback<sup>18+</sup> 782 783type OnSelectCallback = (index: number, selectStr: string) => void 784 785下拉菜单选中某一项的回调。 786 787**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 788 789**系统能力：** SystemCapability.ArkUI.ArkUI.Full 790 791**参数：** 792 793| 参数名 | 类型 | 必填 | 说明 | 794| ------ | ------ | ---- | -------------- | 795| index | number | 是 | 选中项的索引，索引值从0开始。 | 796| selectStr | string | 是 | 选中项的值。 | 797 798## 示例1（设置下拉菜单） 799 800该示例通过配置SelectOptions实现下拉菜单。 801 802```ts 803// xxx.ets 804@Entry 805@Component 806struct SelectExample { 807 @State text: string = "TTTTT"; 808 @State index: number = 2; 809 @State space: number = 8; 810 @State arrowPosition: ArrowPosition = ArrowPosition.END; 811 812 build() { 813 Column() { 814 Select([{ value: 'aaa', icon: $r("app.media.selection") }, 815 { value: 'bbb', icon: $r("app.media.selection") }, 816 { value: 'ccc', icon: $r("app.media.selection") }, 817 { value: 'ddd', icon: $r("app.media.selection") }]) 818 .selected(this.index) 819 .value(this.text) 820 .font({ size: 16, weight: 500 }) 821 .fontColor('#182431') 822 .selectedOptionFont({ size: 16, weight: 400 }) 823 .optionFont({ size: 16, weight: 400 }) 824 .space(this.space) 825 .arrowPosition(this.arrowPosition) 826 .menuAlign(MenuAlignType.START, { dx: 0, dy: 0 }) 827 .optionWidth(200) 828 .optionHeight(300) 829 .onSelect((index: number, text?: string | undefined) => { 830 console.info('Select:' + index); 831 this.index = index; 832 if (text) { 833 this.text = text; 834 } 835 }) 836 }.width('100%') 837 } 838} 839``` 840 841 842 843 844 845## 示例2（设置symbol类型图标） 846该示例实现了一个下拉菜单中图片为Symbol的Select组件。 847 848```ts 849// xxx.ets 850import { SymbolGlyphModifier } from '@kit.ArkUI' 851 852@Entry 853@Component 854struct SelectExample { 855 @State text: string = "TTTTT"; 856 @State index: number = 2; 857 @State space: number = 8; 858 @State arrowPosition: ArrowPosition = ArrowPosition.END; 859 @State symbolModifier1: SymbolGlyphModifier = 860 new SymbolGlyphModifier($r('sys.symbol.ohos_wifi')).fontColor([Color.Green]); 861 @State symbolModifier2: SymbolGlyphModifier = 862 new SymbolGlyphModifier($r('sys.symbol.ohos_star')).fontColor([Color.Red]); 863 @State symbolModifier3: SymbolGlyphModifier = 864 new SymbolGlyphModifier($r('sys.symbol.ohos_trash')).fontColor([Color.Gray]); 865 @State symbolModifier4: SymbolGlyphModifier = 866 new SymbolGlyphModifier($r('sys.symbol.exposure')).fontColor([Color.Gray]); 867 868 build() { 869 Column() { 870 Select([{ value: 'aaa', symbolIcon: this.symbolModifier1 }, 871 { value: 'bbb', symbolIcon: this.symbolModifier2 }, 872 { value: 'ccc', symbolIcon: this.symbolModifier3 }, 873 { value: 'ddd', symbolIcon: this.symbolModifier4 }]) 874 .selected(this.index) 875 .value(this.text) 876 .font({ size: 16, weight: 500 }) 877 .fontColor('#182431') 878 .selectedOptionFont({ size: 16, weight: 400 }) 879 .optionFont({ size: 16, weight: 400 }) 880 .space(this.space) 881 .arrowPosition(this.arrowPosition) 882 .menuAlign(MenuAlignType.START, { dx: 0, dy: 0 }) 883 .onSelect((index: number, text?: string | undefined) => { 884 console.info('Select:' + index); 885 this.index = index; 886 if (text) { 887 this.text = text; 888 } 889 }) 890 }.width('100%') 891 } 892} 893``` 894 895 896 897## 示例3（自定义下拉菜单） 898该示例实现了一个自定义下拉菜选项的Select组件。自定义下拉菜单选项样式为“文本 + Symbol图片 + 空白间隔 + 文本 + 绘制三角形”，点击菜单选项后Select组件显示菜单选项的文本内容。 899 900```ts 901import { SymbolGlyphModifier } from '@kit.ArkUI'; 902 903class MyMenuItemContentModifier implements ContentModifier<MenuItemConfiguration> { 904 modifierText: string = ""; 905 906 constructor(text: string) { 907 this.modifierText = text; 908 } 909 910 applyContent(): WrappedBuilder<[MenuItemConfiguration]> { 911 return wrapBuilder(MenuItemBuilder); 912 } 913} 914 915@Builder 916function MenuItemBuilder(configuration: MenuItemConfiguration) { 917 Row() { 918 Text(configuration.value) 919 Blank() 920 if (configuration.symbolIcon) { 921 SymbolGlyph().attributeModifier(configuration.symbolIcon).fontSize(24) 922 } else if (configuration.icon) { 923 Image(configuration.icon).size({ width: 24, height: 24 }) 924 } 925 Blank(30) 926 Text((configuration.contentModifier as MyMenuItemContentModifier).modifierText) 927 Blank(30) 928 Path() 929 .width('100px') 930 .height('150px') 931 .commands('M40 0 L80 100 L0 100 Z') 932 .fillOpacity(0) 933 .stroke(Color.Black) 934 .strokeWidth(3) 935 } 936 .onClick(() => { 937 configuration.triggerSelect(configuration.index, configuration.value.valueOf().toString()); 938 }) 939} 940 941@Entry 942@Component 943struct SelectExample { 944 @State text: string = "Content Modifier Select"; 945 @State symbolModifier1: SymbolGlyphModifier = 946 new SymbolGlyphModifier($r('sys.symbol.ohos_trash')).fontColor([Color.Gray]); 947 @State symbolModifier2: SymbolGlyphModifier = 948 new SymbolGlyphModifier($r('sys.symbol.exposure')).fontColor([Color.Gray]); 949 950 build() { 951 Column() { 952 Row() { 953 Select([{ value: 'item1', icon: $r('app.media.icon'), symbolIcon: this.symbolModifier1 }, 954 { value: 'item1', icon: $r('app.media.icon'), symbolIcon: this.symbolModifier2 }]) 955 .value(this.text) 956 .onSelect((index: number, text?: string) => { 957 console.info('Select index:' + index); 958 console.info('Select text:' + text); 959 }) 960 .menuItemContentModifier(new MyMenuItemContentModifier("Content Modifier")) 961 962 }.alignItems(VerticalAlign.Center).height('50%') 963 } 964 } 965} 966``` 967 968 969## 示例4（设置分割线样式） 970该示例通过配置divider的DividerOptions类型实现分割线样式的下拉菜单。 971 972```ts 973// xxx.ets 974@Entry 975@Component 976struct SelectExample { 977 @State text: string = "TTTTT"; 978 @State index: number = -1; 979 @State arrowPosition: ArrowPosition = ArrowPosition.END; 980 981 build() { 982 Column() { 983 Select([{ value: 'aaa', icon: $r("app.media.icon") }, 984 { value: 'bbb', icon: $r("app.media.icon") }, 985 { value: 'ccc', icon: $r("app.media.icon") }, 986 { value: 'ddd', icon: $r("app.media.icon") }]) 987 .selected(this.index) 988 .value(this.text) 989 .font({ size: 16, weight: 500 }) 990 .fontColor('#182431') 991 .selectedOptionFont({ size: 16, weight: 400 }) 992 .optionFont({ size: 16, weight: 400 }) 993 .arrowPosition(this.arrowPosition) 994 .menuAlign(MenuAlignType.START, { dx: 0, dy: 0 }) 995 .optionWidth(200) 996 .optionHeight(300) 997 .divider({ 998 strokeWidth: 5, 999 color: Color.Blue, 1000 startMargin: 10, 1001 endMargin: 10 1002 }) 1003 .onSelect((index: number, text?: string | undefined) => { 1004 console.info('Select:' + index); 1005 this.index = index; 1006 if (text) { 1007 this.text = text; 1008 } 1009 }) 1010 }.width('100%') 1011 } 1012} 1013``` 1014 1015 1016## 示例5（设置无分割线样式） 1017该示例通过配置divider为null实现无分割线样式的下拉菜单。 1018 1019```ts 1020// xxx.ets 1021@Entry 1022@Component 1023struct SelectExample { 1024 @State text: string = "TTTTT"; 1025 @State index: number = -1; 1026 @State arrowPosition: ArrowPosition = ArrowPosition.END; 1027 1028 build() { 1029 Column() { 1030 Select([{ value: 'aaa', icon: $r("app.media.icon") }, 1031 { value: 'bbb', icon: $r("app.media.icon") }, 1032 { value: 'ccc', icon: $r("app.media.icon") }, 1033 { value: 'ddd', icon: $r("app.media.icon") }]) 1034 .selected(this.index) 1035 .value(this.text) 1036 .font({ size: 16, weight: 500 }) 1037 .fontColor('#182431') 1038 .selectedOptionFont({ size: 16, weight: 400 }) 1039 .optionFont({ size: 16, weight: 400 }) 1040 .arrowPosition(this.arrowPosition) 1041 .menuAlign(MenuAlignType.START, { dx: 0, dy: 0 }) 1042 .optionWidth(200) 1043 .optionHeight(300) 1044 .divider(null) 1045 .onSelect((index: number, text?: string | undefined) => { 1046 console.info('Select:' + index); 1047 this.index = index; 1048 if (text) { 1049 this.text = text; 1050 } 1051 }) 1052 }.width('100%') 1053 } 1054} 1055``` 1056 1057
