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**参数：** 18 19| 参数名 | 参数类型 | 必填 | 参数描述 | 20| ------- | ---------------------------------------------- | ---- | -------------- | 21| options | Array\<[SelectOption](#selectoption对象说明)\> | 是 | 设置下拉选项。 | 22 23## SelectOption对象说明 24 25| 参数名 | 参数类型 | 必填 | 参数描述 | 26| ------ | ----------------------------------- | ---- | -------------- | 27| value | [ResourceStr](ts-types.md#resourcestr) | 是 | 下拉选项内容。 | 28| icon | [ResourceStr](ts-types.md#resourcestr) | 否 | 下拉选项图片。 | 29 30## 属性 31 32除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： 33 34| 名称 | 参数类型 | 描述 | 35| ----------------------- | ------------------------------------- | --------------------------------------------- | 36| selected | number | 设置下拉菜单初始选项的索引，第一项的索引为0。<br>当不设置selected属性或设置异常值时，默认选择值为-1，菜单项不选中；当设置为undefined、null时，选中第一项。<br />从API version 10开始，该属性支持[$$](../../quick-start/arkts-two-way-sync.md)双向绑定变量。 | 37| value | string | 设置下拉按钮本身的文本内容。当菜单选中时默认会替换为菜单项文本内容。<br />从API version 10开始，该参数支持[$$](../../quick-start/arkts-two-way-sync.md)双向绑定变量。 | 38| font | [Font](ts-types.md#font) | 设置下拉按钮本身的文本样式。<br/>默认值：<br/>{<br/>size: '16fp',<br/>weight: FontWeight.Medium<br/>} <br/>**说明：** <br/>当size为0的时候，文本不显示，当size为负值的时候，文本的size按照默认值显示。| 39| fontColor | [ResourceColor](ts-types.md#resourcecolor) | 设置下拉按钮本身的文本颜色。<br/>默认值：'\#E5182431' | 40| selectedOptionBgColor | [ResourceColor](ts-types.md#resourcecolor) | 设置下拉菜单选中项的背景色。<br/>默认值：'\#33007DFF' | 41| selectedOptionFont | [Font](ts-types.md#font) | 设置下拉菜单选中项的文本样式。<br/>默认值：<br/>{<br/>size: '16fp',<br/>weight: FontWeight.Regular<br/>} <br/>**说明：** <br/>当size为0的时候，文本不显示，当size为负值的时候，文本的size按照默认值显示。| 42| selectedOptionFontColor | [ResourceColor](ts-types.md#resourcecolor) | 设置下拉菜单选中项的文本颜色。<br/>默认值：'\#ff007dff' | 43| optionBgColor | [ResourceColor](ts-types.md#resourcecolor) | 设置下拉菜单项的背景色。<br/>默认值：'\#ffffffff' | 44| optionFont | [Font](ts-types.md#font) | 设置下拉菜单项的文本样式。<br/>默认值：<br/>{<br/>size: '16fp',<br/>weight: FontWeight.Regular<br/>} <br/>**说明：** <br/>当size为0的时候，文本不显示，当size为负值的时候，文本的size按照默认值显示。| 45| optionFontColor | [ResourceColor](ts-types.md#resourcecolor) | 设置下拉菜单项的文本颜色。<br/>默认值：'\#ff182431' | 46| space<sup>10+</sup> | [Length](ts-types.md#length) | 设置下拉菜单项的文本与箭头之间的间距。<br/>**说明：** <br/>不支持设置百分比。<br/>默认值：8,设置为null、undefined，或者小于等于8的值，取默认值 | 47| arrowPosition<sup>10+</sup> | [ArrowPosition](#arrowposition10枚举说明) | 设置下拉菜单项的文本与箭头之间的对齐方式。<br/>默认值：ArrowPosition.END | 48| menuAlign<sup>10+</sup> | alignType: [MenuAlignType](#menualigntype10枚举说明),<br/> offset?: [Offset](ts-types.md#offset) | 设置下拉按钮与下拉菜单间的对齐方式。<br/> -alignType: 对齐方式类型，必填。<br/>默认值：MenuAlignType.START <br/> -offset: 按照对齐类型对齐后，下拉菜单相对下拉按钮的偏移量。<br/> 默认值：{dx: 0, dy: 0}| 49 50## ArrowPosition<sup>10+</sup>枚举说明 51 52| 名称 | 描述 | 53| ------------------- | ------------------ | 54| END<sup>10+</sup> | 文字在前，箭头在后。 | 55| START<sup>10+</sup> | 箭头在前，文字在后。 | 56 57 58## MenuAlignType<sup>10+</sup>枚举说明 59 60| 名称 | 描述 | 61| ------------------- | ------------------ | 62| START | 按照语言方向起始端对齐。 | 63| CENTER | 居中对齐。 | 64| END | 按照语言方向末端对齐。 | 65 66## 事件 67 68| 名称 | 功能描述 | 69| ------------------------------------------------------------ | ------------------------------------------------------------ | 70| onSelect(callback: (index: number, value?: string) => void) | 下拉菜单选中某一项的回调。<br/>index：选中项的索引。<br/>value：选中项的值。 | 71 72## 示例 73 74```ts 75// xxx.ets 76@Entry 77@Component 78struct SelectExample { 79 @State text: string = "TTTTT" 80 @State index: number = 2 81 @State space: number = 8 82 @State arrowPosition: ArrowPosition = ArrowPosition.END 83 build() { 84 Column() { 85 Select([{ value: 'aaa', icon: "/common/public_icon.svg" }, 86 { value: 'bbb', icon: "/common/public_icon.svg" }, 87 { value: 'ccc', icon: "/common/public_icon.svg" }, 88 { value: 'ddd', icon: "/common/public_icon.svg" }]) 89 .selected(this.index) 90 .value(this.text) 91 .font({ size: 16, weight: 500 }) 92 .fontColor('#182431') 93 .selectedOptionFont({ size: 16, weight: 400 }) 94 .optionFont({ size: 16, weight: 400 }) 95 .space(this.space) 96 .arrowPosition(this.arrowPosition) 97 .menuAlign(MenuAlignType.START, {dx:0, dy:0}) 98 .onSelect((index:number, text?: string | undefined)=>{ 99 console.info('Select:' + index) 100 this.index = index; 101 if(text){ 102 this.text = text; 103 } 104 }) 105 }.width('100%') 106 } 107} 108``` 109 110 111
