鸿蒙(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)
            } })
    }
}
相关推荐
云天徽上6 小时前
【数据可视化-106】华为2025上半年财报分析:用Python和Pyecharts打造炫酷可视化大屏
开发语言·python·华为·信息可视化·数据分析·pyecharts
爱笑的眼睛1115 小时前
深入剖析 HarmonyOS ArkUI 声明式开发:状态管理艺术与最佳实践
华为·harmonyos
花先锋队长16 小时前
为何三折叠手机只有华为可以?看华为Mate XTs非凡大师就知道
华为·智能手机
安卓开发者16 小时前
鸿蒙NEXT交互机制解析:从输入设备到手势响应的全面指南
microsoft·交互·harmonyos
奶糖不太甜。19 小时前
鸿蒙分布式数据同步失败全解
分布式·华为·harmonyos·数据同步
CAE虚拟与现实1 天前
华为的 4A 架构简介
服务器·华为·架构·4a架构
小小小小小星2 天前
鸿蒙权限相关问题之应用访问网络、文件等功能时崩溃或无响应,日志提示'权限被拒绝'
harmonyos
数据猿2 天前
华为第四届828 B2B企业节再升级,以AI打造产业生态
人工智能·华为
晚风(●•σ )2 天前
【华为 ICT & HCIA & eNSP 习题汇总】——题目集23
网络·计算机网络·华为·ensp·交换机
Digitally2 天前
如何将华为手机数据转移到OPPO手机
华为·智能手机