鸿蒙（HarmonyOS）下拉选择控件

健飞

已于 2024-07-25 17:49:03 修改

阅读量926

点赞数 1

分类专栏：鸿蒙NEXT开发文章标签： harmonyos 华为 select 下拉选择鸿蒙系统

于 2024-07-25 17:45:44 首次发布

本文链接：https://blog.csdn.net/qq_31622345/article/details/140695992

版权

鸿蒙NEXT开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、操作环境

操作系统: 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) => void
  private text: string

  build() {
    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)
            } })
    }
}