鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：Select）_鸿蒙自定义select

作者：小蓝xlanll | 2024-03-20 13:46:22

踩

鸿蒙自定义select

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

说明：

该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

子组件

无

接口

Select(options: Array<SelectOption>)

参数：

参数名	参数类型	必填	参数描述
options	Array<SelectOption>	是	设置下拉选项。

SelectOption对象说明

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

属性

除支持通用属性外，还支持以下属性：

名称	参数类型	描述
selected	number \| Resource11+	设置下拉菜单初始选项的索引，第一项的索引为0。当不设置selected属性或设置异常值时，默认选择值为-1，菜单项不选中；当设置为undefined、null时，选中第一项。从API version 10开始，该属性支持$$双向绑定变量。
value	ResourceStr11+	设置下拉按钮本身的文本内容。当菜单选中时默认会替换为菜单项文本内容。从API version 10开始，该参数支持$$双向绑定变量。
font	Font	设置下拉按钮本身的文本样式。默认值： { size: '16fp', weight: FontWeight.Medium } 说明：当size为0的时候，文本不显示，当size为负值的时候，文本的size按照默认值显示。
fontColor	ResourceColor	设置下拉按钮本身的文本颜色。默认值：'#E5182431'
selectedOptionBgColor	ResourceColor	设置下拉菜单选中项的背景色。默认值：'#33007DFF'
selectedOptionFont	Font	设置下拉菜单选中项的文本样式。默认值： { size: '16fp', weight: FontWeight.Regular } 说明：当size为0的时候，文本不显示，当size为负值的时候，文本的size按照默认值显示。
selectedOptionFontColor	ResourceColor	设置下拉菜单选中项的文本颜色。默认值：'#ff007dff'
optionBgColor	ResourceColor	设置下拉菜单项的背景色。默认值：'#ffffffff'
optionFont	Font	设置下拉菜单项的文本样式。默认值： { size: '16fp', weight: FontWeight.Regular } 说明：当size为0的时候，文本不显示，当size为负值的时候，文本的size按照默认值显示。
optionFontColor	ResourceColor	设置下拉菜单项的文本颜色。默认值：'#ff182431'
space10+	Length	设置下拉菜单项的文本与箭头之间的间距。说明：不支持设置百分比。
arrowPosition10+	ArrowPosition	设置下拉菜单项的文本与箭头之间的对齐方式。默认值：ArrowPosition.END
menuAlign10+	alignType: MenuAlignType, offset?: Offset	设置下拉按钮与下拉菜单间的对齐方式。 -alignType: 对齐方式类型，必填。默认值：MenuAlignType.START -offset: 按照对齐类型对齐后，下拉菜单相对下拉按钮的偏移量。默认值：{dx: 0, dy: 0}
optionWidth11+	Dimension \| OptionWidthMode	设置下拉菜单项的宽度。OptionWidthMode类型为枚举类型，OptionWidthMode决定下拉菜单是否继承下拉按钮宽度。当设置为undefined、null、负数时，属性不生效，菜单项宽度设为默认值，即菜单默认宽度为2栅格。当菜单项设置宽度小于最小宽度56vp时，菜单宽度回弹至2栅格。正常值范围大于等于0。说明：不支持设置百分比。
optionHeight11+	Dimension	设置下拉菜单显示的最大高度。下拉菜单的默认最大高度是屏幕可用高度的80%，设置的菜单最大高度不能超过默认最大高度。当设置为undefined、null、负数与零时，属性不生效，下拉菜单最大高度设为默认值，即下拉菜单最大高度默认值为屏幕可用高度的80%。正常值范围大于0。如果下拉菜单所有选项的实际高度没有设定的高度大，下拉菜单的高度按实际高度显示。说明：不支持设置百分比。

OptionWidthMode11+枚举说明

名称	描述
FIT_CONTENT	设置该值时，下拉菜单宽度按默认2栅格显示。
FIT_TRIGGER	设置下拉菜单继承下拉按钮宽度。

ArrowPosition10+枚举说明

名称	描述
END10+	文字在前，箭头在后。
START10+	箭头在前，文字在后。

MenuAlignType10+枚举说明

名称	描述
START	按照语言方向起始端对齐。
CENTER	居中对齐。
END	按照语言方向末端对齐。

事件

名称	功能描述
onSelect(callback: (index: number, value?: string) => void)	下拉菜单选中某一项的回调。 index：选中项的索引。 value：选中项的值。

示例


// xxx.ets
@Entry
@Component
struct SelectExample {
  @State text: string = "TTTTT"
  @State index: number = 2
  @State space: number = 8
  @State arrowPosition: ArrowPosition = ArrowPosition.END
  build() {
    Column() {
      Select([{ value: 'aaa', icon: $r("app.media.selecticon") },
        { value: 'bbb', icon: $r("app.media.selecticon") },
        { value: 'ccc', icon: $r("app.media.selecticon") },
        { value: 'ddd', icon: $r("app.media.selecticon") }])
        .selected(this.index)
        .value(this.text)
        .font({ size: 16, weight: 500 })
        .fontColor('#182431')
        .selectedOptionFont({ size: 16, weight: 400 })
        .optionFont({ size: 16, weight: 400 })
        .space(this.space)
        .arrowPosition(this.arrowPosition)
        .menuAlign(MenuAlignType.START, {dx:0, dy:0})
        .optionWidth(200)
        .optionHeight(100)
        .onSelect((index:number, text?: string | undefined)=>{
          console.info('Select:' + index)
          this.index = index;
          if(text){
            this.text = text;
          }
        })
    }.width('100%')
  }
}

最后，有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（Harmony NEXT）资料用来跟着学习是非常有必要的。

这份鸿蒙（Harmony NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

鸿蒙（Harmony NEXT）最新学习路线

HarmonOS基础技能

HarmonOS就业必备技能
HarmonOS多媒体技术

鸿蒙NaPi组件进阶

HarmonOS高级技能

初识HarmonOS内核
实战就业级设备开发

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料