第九节HarmonyOS 常用基础组件28-Select

1、描述

提供下拉选择菜单，可以让用户在多个选项之间选择。

2、接口

Select(options:Array<SelectOption>)

3、SelectOption对象说明

参数名	参数类型	必填	描述
value	ResourceStr	是	下拉选项内容。
icon	ResourceStr	否	下拉选项图标。

4、属性

名称	参数类型	描述
selected	number	设置下拉菜单初始选项的索引，第一项的索引为0。当不设置selected属性时，默认选择值为-1，即菜单项不选中。
value	string	设置下拉按钮本身的文本内容。当菜单选中时默认会替换为菜单项文本内容。
font	Font	设置下拉按钮本身的文本样式。默认值：{size：‘16fp’,weight：FontWeight.Medium}
fontColor	ResourceColor	设置下拉按钮本身的文本颜色。默认值：‘#E6FFFFFF’
selectedOptionBgColor	ResourceColor	设置下拉菜单选中项的背景颜色。默认值：‘#33007DFF’
selectedOptionFont	Font	设置下拉菜单选中项的文本样式。默认值：{size：‘16fp’,weight：FontWeight.Regular}
selectedOptionFontColor	ResourceColor	设置下拉菜单选中项的文本颜色。默认值：‘ff007dff’。
optionBgColor	ResourceColor	设置下拉菜单项的背景颜色。默认值：‘ffffffff’。
optionFont	Font	设置下拉菜单项的文本样式。默认值：{size：‘16fp’,weight：FontWeight.Regular}
optionFontColor	ResourceColor	设置下拉菜单项的文本颜色。默认值：‘ff182431’。

5、事件

名称：onSelect(callback:(index:number, value?:string) => void)

功能描述：下拉菜单选中某一项的回调。index：选中项的索引；value：选中项的值。

6、示例

import router from '@ohos.router'

@Entry
@Component
struct SelectPage {
  @State message: string = '提供下拉选择菜单，可以让用户在多个选项之间选择。'
  @State selectList: Array<SelectOption> = [
    {
      value: "Android",
      icon: $r('app.media.icon')
    },
    {
      value: "Java",
      icon: $r('app.media.icon')
    },
    {
      value: "Python"
    },
    {
      value: "HarmonyOS"
    },
  ]

  build() {
    Row() {
      Scroll() {
        Column() {
          Text(this.message)
            .fontSize(20)
            .fontWeight(FontWeight.Bold)
            .width("96%")

          Select(this.selectList)
            .value("请选择您的职业？")
            .font({ size: 18, weight: FontWeight.Bold })
            .fontColor("#FF00FF")
            .selectedOptionBgColor(Color.Blue)
            .selectedOptionFontColor(Color.White)
            .optionBgColor(Color.Yellow)
            .optionFontColor(Color.Red)
            .onSelect((index: number, value: string) => {
              console.log("select", "index = " + index);
              console.log("select", "value = " + value);
            })

          Button("Select文本文档")
            .fontSize(20)
            .backgroundColor('#007DFF')
            .width('96%')
            .onClick(() => {
              // 处理点击事件逻辑
              router.pushUrl({
                url: "pages/baseComponent/select/SelectDesc",
              })
            })
            .margin({ top: 20 })

        }
        .width('100%')
      }
    }
    .padding({ top: 12, bottom: 12 })
  }
}

7、效果图