鸿蒙5.0版开发：ArkTS基础组件（Select）
往期鸿蒙全套实战文章必看：[*] 鸿蒙开发核心知识点，看这篇文章就够了
[*] 最新版！鸿蒙HarmonyOS Next应用开发实战学习路线
[*] 鸿蒙HarmonyOS NEXT开发技术最全学习路线指南
[*] 鸿蒙应用开发实战项目，看这一篇文章就够了（部分项目附源码）
Select
提供下拉选择菜单，可以让用户在多个选项之间选择。
说明：
该组件从API Version 8开始支持。后续版本如有新增内容，则接纳上角标单独标记该内容的起始版本。
子组件
无
接口
Select(options: Array<SelectOption>)
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
参数：
参数名参数类型必填参数形貌optionsArray<SelectOption>是设置下拉选项。 SelectOption对象说明
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
参数名参数类型必填参数形貌valueResourceStr是下拉选项内容。iconResourceStr否下拉选项图片。 属性
除支持通用属性外，还支持以部属性：
selected
selected(value: number | Resource)
设置下拉菜单初始选项的索引，第一项的索引为0。当不设置selected属性或设置异常值时，默认选择值为-1，菜单项不选中；当设置为undefined、null时，选中第一项。
从API version 10开始，该属性支持$$双向绑定变量。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valuenumber | Resource11+是下拉菜单初始选项的索引。 value
value(value: ResourceStr)
设置下拉按钮本身的文本内容。当菜单选中时默认会更换为菜单项文本内容。
从API version 10开始，该参数支持$$双向绑定变量。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valueResourceStr11+是下拉按钮本身的文本内容。 controlSize12+
controlSize(value: ControlSize)
设置Select组件的尺寸。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valueControlSize11+是Select组件的尺寸。
默认值:ControlSize.NORMAL controlSize、width、height接口作用优先级：
1）如果开发者只设置了width和height，当笔墨大小设置的是比较大的值的时候，笔墨超出组件大小，且以省略号方式表现；
2）如果开发者只设置了controlSize，没有设置width和height，组件宽高自适应笔墨，笔墨不超出组件，并设置最小宽度minWidth和最小高度minHeight；
3）如果controlSize、width、height接口都设置了，width和height设置的值生效，但如果width和height设置的值小于controlSize设置的最小宽度minWidth和最小高度minHeight，width和height设置的值不生效，宽高仍保持controlSize设置的最小宽度minWidth和最小高度minHeight。
menuItemContentModifier12+
menuItemContentModifier(modifier: ContentModifier<MenuItemConfiguration>)
定制Select下拉菜单项内容区的方法。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明modifierContentModifier<MenuItemConfiguration>是在Select组件上，定制下拉菜单项内容区的方法。
modifier: 内容修改器，开发者需要自定义class实现ContentModifier接口。 font
font(value: Font)
设置下拉按钮本身的文本样式。当size为0的时候，文本不表现，当size为负值的时候，文本的size按照默认值表现。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valueFont是下拉按钮本身的文本样式。
API Version 11及从前默认值：
{
size: ‘16fp’,
weight: FontWeight.Medium
}
从API Version 12以后，
如果设置controlSize的值为：controlSize.SMALL，size默认值是’14fp’，否则还是’16fp’。 fontColor
fontColor(value: ResourceColor)
设置下拉按钮本身的文本颜色。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valueResourceColor是下拉按钮本身的文本颜色。
默认值：‘#E5182431’ selectedOptionBgColor
selectedOptionBgColor(value: ResourceColor)
设置下拉菜单选中项的背景致。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valueResourceColor是下拉菜单选中项的背景致。
默认值：‘#33007DFF’ selectedOptionFont
selectedOptionFont(value: Font)
设置下拉菜单选中项的文本样式。当size为0的时候，文本不表现，当size为负值的时候，文本的size按照默认值表现。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valueFont是下拉菜单选中项的文本样式。
默认值：
{
size: ‘16fp’,
weight: FontWeight.Regular
} selectedOptionFontColor
selectedOptionFontColor(value: ResourceColor)
设置下拉菜单选中项的文本颜色。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valueResourceColor是下拉菜单选中项的文本颜色。
默认值：‘#ff007dff’ optionBgColor
optionBgColor(value: ResourceColor)
设置下拉菜单项的背景致。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valueResourceColor是下拉菜单项的背景致。
默认值：‘#ffffffff’ optionFont
optionFont(value: Font)
设置下拉菜单项的文本样式。当size为0的时候，文本不表现，当size为负值的时候，文本的size按照默认值表现。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valueFont是下拉菜单项的文本样式。
默认值：
{
size: ‘16fp’,
weight: FontWeight.Regular
} optionFontColor
optionFontColor(value: ResourceColor)
设置下拉菜单项的文本颜色。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valueResourceColor是下拉菜单项的文本颜色。
默认值：‘#ff182431’ space10+
space(value: Length)
设置下拉菜单项的文本与箭头之间的间距。不支持设置百分比。设置为null、undefined，大概小于即是8的值，取默认值。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valueLength是下拉菜单项的文本与箭头之间的间距。
默认值：8 arrowPosition10+
arrowPosition(value: ArrowPosition)
设置下拉菜单项的文本与箭头之间的对齐方式。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valueArrowPosition是下拉菜单项的文本与箭头之间的对齐方式。
默认值：ArrowPosition.END menuAlign10+
menuAlign(alignType: MenuAlignType, offset?: Offset)
设置下拉按钮与下拉菜单间的对齐方式。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明alignTypeMenuAlignType是对齐方式类型。
默认值：MenuAlignType.STARToffsetOffset否按照对齐类型对齐后，下拉菜单相对下拉按钮的偏移量。
默认值：{dx: 0, dy: 0} optionWidth11+
optionWidth(value: Dimension | OptionWidthMode )
设置下拉菜单项的宽度，不支持设置百分比。OptionWidthMode类型为罗列类型，OptionWidthMode决定下拉菜单是否继承下拉按钮宽度。
当设置为undefined、null、负数时，属性不生效，菜单项宽度设为默认值，即菜单默认宽度为2栅格。
当菜单项设置宽度小于最小宽度56vp时，菜单宽度回弹至2栅格。正常值范围大于即是0。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valueDimension | OptionWidthMode是下拉菜单项的宽度。 optionHeight11+
optionHeight(value: Dimension)
设置下拉菜单表现的最大高度，不支持设置百分比。下拉菜单的默认最大高度是屏幕可用高度的80%，设置的菜单最大高度不能凌驾默认最大高度。
当设置为undefined、null、负数与零时，属性不生效，下拉菜单最大高度设为默认值，即下拉菜单最大高度默认值为屏幕可用高度的80%。
正常值范围大于0。如果下拉菜单全部选项的现实高度没有设定的高度大，下拉菜单的高度按现实高度表现。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valueDimension是下拉菜单表现的最大高度。 menuBackgroundColor11+
menuBackgroundColor(value: ResourceColor)
设置下拉菜单的背景致。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valueResourceColor是下拉菜单的背景致。
默认值：Color.Transparent menuBackgroundBlurStyle11+
menuBackgroundBlurStyle(value: BlurStyle)
设置下拉菜单的背景含糊材质。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valueBlurStyle是下拉菜单的背景含糊材质。
默认值：BlurStyle.COMPONENT_ULTRA_THICK OptionWidthMode11+罗列说明
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
名称形貌FIT_CONTENT设置该值时，下拉菜单宽度按默认2栅格表现。FIT_TRIGGER设置下拉菜单继承下拉按钮宽度。 ArrowPosition10+罗列说明
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
名称形貌END10+笔墨在前，箭头在后。START10+箭头在前，笔墨在后。 MenuAlignType10+罗列说明
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
名称形貌START按照语言方向起始端对齐。CENTER居中对齐。END按照语言方向末端对齐。 MenuItemConfiguration12+对象说明
参数名类型必填说明valueResourceStr是下拉菜单项的文本内容。iconResourceStr否下拉菜单项的图片内容。selectedboolean是下拉菜单项是否被选中。
默认值：falseindexnumber是下拉菜单项的索引。triggerSelect(index: number, value: string) => void是下拉菜单选中某一项的回调函数。
index: 选中菜单项的索引。
value: 选中菜单项的文本。
说明: index会赋值给事件onSelect回调中的索引参数； value会返回给Select组件表现，同时会赋值给事件onSelect回调中的文本参数。 事件
onSelect
onSelect(callback: (index: number, value: string) => void)
下拉菜单选中某一项的回调。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明indexnumber是选中项的索引。valuestring是选中项的值。 示例1
// 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%')
}
}
https://i-blog.csdnimg.cn/direct/8cb2b70d3ca24070a001200158825772.png
示例2
该示例实现了一个自定义下拉菜选项的Select组件。自定义下拉菜单选项样式为“文本 + 图片 + 空白间隔 + 文本 + 绘制三角形”，点击菜单选项后Select组件表现菜单选项的文本内容。
import { MenuItemModifier } from '@ohos.arkui.modifier'
class MyMenuItemContentModifier implements ContentModifier<MenuItemConfiguration> {
modifierText: string = ""
constructor(text: string) {
this.modifierText = text;
}
applyContent(): WrappedBuilder<> {
return wrapBuilder(MenuItemBuilder)
}
}
@Builder
function MenuItemBuilder(configuration: MenuItemConfiguration) {
Row() {
Text(configuration.value)
Blank()
Image(configuration.icon).size({ width: 40, height: 40 })
Blank(30)
Text((configuration.contentModifier as MyMenuItemContentModifier).modifierText)
Path()
.width('100px')
.height('150px')
.commands('M40 0 L80 100 L0 100 Z')
.fillOpacity(0)
.stroke(Color.Black)
.strokeWidth(3)
}
.onClick(() => {
configuration.triggerSelect(configuration.index, configuration.value.valueOf().toString())
})
}
@Entry
@Component
struct SelectExample {
@State text: string = "有modifier"
build() {
Column() {
Row() {
Select([{ value: 'item1', icon: $r("app.media.icon") },
{ value: 'item2', icon: $r("app.media.icon") }])
.value(this.text)
.onSelect((index:number, text?: string)=>{
console.info('Select index:' + index)
console.info('Select text:' + text)
})
.menuItemContentModifier(new MyMenuItemContentModifier("我来自Modifier"))
}.alignItems(VerticalAlign.Center).height("50%")
}
}
}
https://i-blog.csdnimg.cn/direct/8d718048359b4f10a5a42624ea8212dd.png
看完三件事❤️
[*]如果你以为这篇内容对你还蛮有资助，我想约请你帮我三个小忙：
[*]点赞，转发，有你们的 『点赞和批评』，才是我创造的动力。
[*]关注作者，不定期分享原创知识。
[*]同时可以等候后续文章ing
页:
[1]