鸿蒙Harmony应用开辟—ArkTS声明式开辟（根本手势：Select） ...

十念 · 2024-8-13 19:00:26

提供下拉选择菜单，可以让用户在多个选项之间选择。
说明：
该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
子组件

无
接口

Select(options: Array<SelectOption>)
参数：
参数名参数范例必填参数描述optionsArray<SelectOption>是设置下拉选项。 SelectOption对象说明

参数名参数范例必填参数描述valueResourceStr是下拉选项内容。iconResourceStr否下拉选项图片。属性

除支持通用属性外，还支持以下属性：
名称参数范例描述selectednumber | Resource11+设置下拉菜单初始选项的索引，第一项的索引为0。
当不设置selected属性或设置异常值时，默认选择值为-1，菜单项不选中；当设置为undefined、null时，选中第一项。
从API version 10开始，该属性支持$$双向绑定变量。valueResourceStr11+设置下拉按钮本身的文本内容。当菜单选中时默认会替换为菜单项文本内容。
从API version 10开始，该参数支持$$双向绑定变量。fontFont设置下拉按钮本身的文本样式。
默认值：
{
size: '16fp',
weight: FontWeight.Medium
}
说明：
当size为0的时候，文本不表现，当size为负值的时候，文本的size按照默认值表现。fontColorResourceColor设置下拉按钮本身的文本颜色。
默认值：'#E5182431'selectedOptionBgColorResourceColor设置下拉菜单选中项的背景色。
默认值：'#33007DFF'selectedOptionFontFont设置下拉菜单选中项的文本样式。
默认值：
{
size: '16fp',
weight: FontWeight.Regular
}
说明：
当size为0的时候，文本不表现，当size为负值的时候，文本的size按照默认值表现。selectedOptionFontColorResourceColor设置下拉菜单选中项的文本颜色。
默认值：'#ff007dff'optionBgColorResourceColor设置下拉菜单项的背景色。
默认值：'#ffffffff'optionFontFont设置下拉菜单项的文本样式。
默认值：
{
size: '16fp',
weight: FontWeight.Regular
}
说明：
当size为0的时候，文本不表现，当size为负值的时候，文本的size按照默认值表现。optionFontColorResourceColor设置下拉菜单项的文本颜色。
默认值：'#ff182431'space10+Length设置下拉菜单项的文本与箭头之间的间距。
说明：
不支持设置百分比。arrowPosition10+ArrowPosition设置下拉菜单项的文本与箭头之间的对齐方式。
默认值：ArrowPosition.ENDmenuAlign10+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。如果下拉菜单所有选项的实际高度没有设定的高度大，下拉菜单的高度按实际高度表现。
说明：
不支持设置百分比。 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(100)
.onSelect((index:number, text?: string | undefined)=>{
console.info('Select:' + index)
this.index = index;
if(text){
this.text = text;
}
})
}.width('100%')
}
}

复制代码

最后，有很多小同伴不知道学习哪些鸿蒙开辟技术？不知道必要重点把握哪些鸿蒙应用开辟知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（Harmony NEXT）资料用来跟着学习是非常有须要的。
这份鸿蒙（Harmony NEXT）资料包罗了鸿蒙开辟必把握的核心知识要点，内容包罗了（ArkTS、ArkUI开辟组件、Stage模子、多端摆设、分布式应用开辟、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开辟、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）技术知识点。
希望这一份鸿蒙学习资料能够给各人带来帮助，有必要的小同伴自行领取，限时开源，先到先得~无套路领取！！
获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料
鸿蒙（Harmony NEXT）最新学习路线

HarmonOS根本技能

HarmonOS就业必备技能
HarmonOS多媒体技术

鸿蒙NaPi组件进阶

HarmonOS高级技能

初识HarmonOS内核
实战就业级设备开辟

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开辟入门教学视频，内容包罗：ArkTS、ArkUI、Web开辟、应用模子、资源分类…等知识点。
获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料
《鸿蒙 (OpenHarmony)开辟入门教学视频》