鸿蒙(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)
            } })
    }
}
相关推荐
SuperHeroWu713 小时前
【HarmonyOS】元服务入门详解 (一)
华为·harmonyos·鸿蒙·元服务·卡片·免安装
Georgewu13 小时前
【HarmonyOS】ArkUI-X 跨平台框架入门详解(一)
harmonyos
SuperHeroWu713 小时前
【HarmonyOS】元服务概念详解
华为·harmonyos·鸿蒙·概念·元服务·详解
Georgewu14 小时前
【HarmonyOS】ArkUI-X一套代码跑多端的跨平台方案概念详解
harmonyos
ins_lizhiming18 小时前
【人工智能】华为昇腾NPU-Vllm Ascend部署及镜像制作
人工智能·pytorch·华为·语言模型·自然语言处理
zhanshuo18 小时前
HarmonyOS NEXT 智能场景识别实战:让设备主动思考的关键技术揭秘
harmonyos
zhanshuo1 天前
HarmonyOS分布式能力全解析:手机一放下,音箱自动响起!
harmonyos
zhanshuo1 天前
基于HarmonyOS的智能灯光控制系统设计:从定时触发到动作联动全流程实战
harmonyos
weixin_541299941 天前
鸿蒙应用开发: 鸿蒙项目中使用私有 npm 插件的完整流程
华为·npm·harmonyos·鸿蒙
Georgewu1 天前
【HarmonyOS】元服务概念详解
harmonyos