鸿蒙(HarmonyOS)下拉选择控件

一、操作环境

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

二、效果图

三、代码

复制代码
SelectPVComponent.ets
TypeScript 复制代码
@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中的调用方式:

TypeScript 复制代码
//问题程度
//若需要选项前带图标。可自定添加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)
            } })
    }
}
相关推荐
coder_pig6 小时前
跟🤡杰哥一起学Flutter (三十四、玩转Flutter手势✋)
前端·flutter·harmonyos
simple丶7 小时前
【HarmonyOS】鸿蒙蓝牙连接与通信技术
harmonyos·arkts·arkui
二二孚日8 小时前
自用华为ICT云赛道Big Data第五章知识点-Flume海量日志聚合
大数据·华为
前端世界8 小时前
HarmonyOS开发实战:鸿蒙分布式生态构建与多设备协同发布全流程详解
分布式·华为·harmonyos
Jalor9 小时前
Flutter + 鸿蒙 | Flutter 跳转鸿蒙原生界面
flutter·harmonyos
二二孚日10 小时前
自用华为ICT云赛道Big Data第四章知识点-Flink流批一体分布式实时处理引擎
大数据·华为
zhanshuo10 小时前
开发者必看!如何在HarmonyOS中快速调用摄像头功能
harmonyos
HMSCore10 小时前
借助HarmonyOS SDK,《NBA巅峰对决》实现“分钟级启动”到“秒级进场”
harmonyos
zhanshuo10 小时前
鸿蒙UI开发全解:JS与Java双引擎实战指南
前端·javascript·harmonyos
HarmonyOS小助手11 小时前
闯入鸿蒙:浪漫、理想与「草台班子」
harmonyos·鸿蒙·harmonyos next·鸿蒙生态