鸿蒙（HarmonyOS）下拉选择控件

一、操作环境

操作系统:  Windows 11 专业版、IDE:DevEco Studio 3.1.1 Release、SDK:HarmonyOS 3.1.0（API 9）

二、效果图

三、代码

SelectPVComponent.ets

@Component
export default struct SelectPVComponent {@Link selection: SelectOption[]private callback: (index: number, value?: string) => voidprivate text: stringbuild() {Row() {Image($r('app.media.required')).margin({ bottom: 5 }).width('5%')Text(this.text)//设置SelectOption对象参数Select(this.selection).selected(0).value('请选择').font({ size: 16, weight: 500 }).selectedOptionFont({ size: 16, weight: FontWeight.Regular }).optionFont({ size: 16, weight: 400 }).onSelect((index: number, value: string) => {this.callback?.(index, value)})}.width('100%')}
}

在page中的调用方式：

//问题程度
//若需要选项前带图标。可自定添加icon：{ value: '一般',icon:'xxx' }
@State issueExtent: SelectOption[] = [{ value: '一般' }, { value: '严重' }, { value: '紧要' }]build() {Column() {SelectPVComponent({ text: '问题程度:',selection: $issueExtent,callback: (index: number, value: string) => {console.info('问题程度:' + index + ': ' + value)} })}
}