Select
提供下拉选择菜单,可以让用户在多个选项之间选择。
说明:
该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
子组件
无
接口
Select(options: Array<SelectOption>)
参数:
参数名 | 参数类型 | 必填 | 参数描述 |
---|---|---|---|
options | Array<SelectOption> | 是 | 设置下拉选项。 |
SelectOption对象说明
参数名 | 参数类型 | 必填 | 参数描述 |
---|---|---|---|
value | ResourceStr | 是 | 下拉选项内容。 |
icon | ResourceStr | 否 | 下拉选项图片。 |
属性
除支持通用属性外,还支持以下属性:
名称 | 参数类型 | 描述 |
---|---|---|
selected | number | Resource11+ | 设置下拉菜单初始选项的索引,第一项的索引为0。 当不设置selected属性或设置异常值时,默认选择值为-1,菜单项不选中;当设置为undefined、null时,选中第一项。 从API version 10开始,该属性支持$$双向绑定变量。 |
value | ResourceStr11+ | 设置下拉按钮本身的文本内容。当菜单选中时默认会替换为菜单项文本内容。 从API version 10开始,该参数支持$$双向绑定变量。 |
font | Font | 设置下拉按钮本身的文本样式。 默认值: { size: '16fp', weight: FontWeight.Medium } 说明: 当size为0的时候,文本不显示,当size为负值的时候,文本的size按照默认值显示。 |
fontColor | ResourceColor | 设置下拉按钮本身的文本颜色。 默认值:'#E5182431' |
selectedOptionBgColor | ResourceColor | 设置下拉菜单选中项的背景色。 默认值:'#33007DFF' |
selectedOptionFont | Font | 设置下拉菜单选中项的文本样式。 默认值: { size: '16fp', weight: FontWeight.Regular } 说明: 当size为0的时候,文本不显示,当size为负值的时候,文本的size按照默认值显示。 |
selectedOptionFontColor | ResourceColor | 设置下拉菜单选中项的文本颜色。 默认值:'#ff007dff' |
optionBgColor | ResourceColor | 设置下拉菜单项的背景色。 默认值:'#ffffffff' |
optionFont | Font | 设置下拉菜单项的文本样式。 默认值: { size: '16fp', weight: FontWeight.Regular } 说明: 当size为0的时候,文本不显示,当size为负值的时候,文本的size按照默认值显示。 |
optionFontColor | ResourceColor | 设置下拉菜单项的文本颜色。 默认值:'#ff182431' |
space10+ | Length | 设置下拉菜单项的文本与箭头之间的间距。 说明: 不支持设置百分比。 默认值:8,设置为null、undefined,或者小于等于8的值,取默认值 |
arrowPosition10+ | ArrowPosition | 设置下拉菜单项的文本与箭头之间的对齐方式。 默认值:ArrowPosition.END |
menuAlign10+ | alignType: MenuAlignType, offset?: Offset |
设置下拉按钮与下拉菜单间的对齐方式。 -alignType: 对齐方式类型,必填。 默认值:MenuAlignType.START -offset: 按照对齐类型对齐后,下拉菜单相对下拉按钮的偏移量。 默认值:{dx: 0, dy: 0} |
optionWidth11+ | Dimension | OptionWidthMode | 设置下拉菜单项的宽度。OptionWidthMode类型为枚举类型,OptionWidthMode决定下拉菜单是否继承下拉按钮宽度。 当设置为undefined、null、负数时,属性不生效,菜单项宽度设为默认值,即菜单默认宽度为2栅格。 当菜单项设置宽度小于最小宽度56vp时,菜单宽度回弹至2栅格。正常值范围大于等于0。 说明: 不支持设置百分比。 |
optionHeight11+ | Dimension | 设置下拉菜单显示的最大高度。下拉菜单的默认最大高度是屏幕可用高度的80%,设置的菜单最大高度不能超过默认最大高度。 当设置为undefined、null、负数与零时,属性不生效,下拉菜单最大高度设为默认值,即下拉菜单最大高度默认值为屏幕可用高度的80%。 正常值范围大于0。如果下拉菜单所有选项的实际高度没有设定的高度大,下拉菜单的高度按实际高度显示。 说明: 不支持设置百分比。 |
menuBackgroundColor11+ | ResourceColor | 设置下拉菜单的背景色。 默认值:Color.Transparent |
menuBackgroundBlurStyle11+ | BlurStyle | 设置下拉菜单的背景模糊材质。 默认值:BlurStyle.COMPONENT_ULTRA_THICK |
OptionWidthMode11+枚举说明
名称 | 描述 |
---|---|
FIT_CONTENT | 设置该值时,下拉菜单宽度按默认2栅格显示。 |
FIT_TRIGGER | 设置下拉菜单继承下拉按钮宽度。 |
ArrowPosition10+枚举说明
名称 | 描述 |
---|---|
END10+ | 文字在前,箭头在后。 |
START10+ | 箭头在前,文字在后。 |
MenuAlignType10+枚举说明
名称 | 描述 |
---|---|
START | 按照语言方向起始端对齐。 |
CENTER | 居中对齐。 |
END | 按照语言方向末端对齐。 |
事件
名称 | 功能描述 |
---|---|
onSelect(callback: (index: number, value: string) => void) | 下拉菜单选中某一项的回调。 index:选中项的索引。 value:选中项的值。 |
示例
// xxx.ets
@Entry
@Component
struct SelectExample {
@State text: string = "TTTTT"
@State index: number = 2
@State space: number = 8
@State arrowPosition: ArrowPosition = ArrowPosition.END
build() {
Column() {
Select([{ value: 'aaa', icon: $r("app.media.selecticon") },
{ value: 'bbb', icon: $r("app.media.selecticon") },
{ value: 'ccc', icon: $r("app.media.selecticon") },
{ value: 'ddd', icon: $r("app.media.selecticon") }])
.selected(this.index)
.value(this.text)
.font({ size: 16, weight: 500 })
.fontColor('#182431')
.selectedOptionFont({ size: 16, weight: 400 })
.optionFont({ size: 16, weight: 400 })
.space(this.space)
.arrowPosition(this.arrowPosition)
.menuAlign(MenuAlignType.START, {dx:0, dy:0})
.optionWidth(200)
.optionHeight(300)
.onSelect((index:number, text?: string | undefined)=>{
console.info('Select:' + index)
this.index = index;
if(text){
this.text = text;
}
})
}.width('100%')
}
}