鸿蒙HarmonyOS NEXT开发:Select(基础组件)

110 篇文章 0 订阅

Select

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

说明:

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

子组件

接口

Select(options: Array<SelectOption>)

原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。

参数:

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

SelectOption对象说明

原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。

参数名参数类型必填参数描述
valueResourceStr下拉选项内容。
iconResourceStr下拉选项图片。

属性

除支持通用属性外,还支持以下属性:

selected

selected(value: number | Resource)

设置下拉菜单初始选项的索引,第一项的索引为0。当不设置selected属性或设置异常值时,默认选择值为-1,菜单项不选中;当设置为undefined、null时,选中第一项。

从API version 10开始,该属性支持$$双向绑定变量。

原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名类型必填说明
valuenumber | Resource11+下拉菜单初始选项的索引。

value

value(value: ResourceStr)

设置下拉按钮本身的文本内容。当菜单选中时默认会替换为菜单项文本内容。

从API version 10开始,该参数支持$$双向绑定变量。

原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名类型必填说明
valueResourceStr11+下拉按钮本身的文本内容。

controlSize12+

controlSize(value: ControlSize)

设置Select组件的尺寸。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名类型必填说明
valueControlSize11+Select组件的尺寸。
默认值:ControlSize.NORMAL

controlSize、width、height接口作用优先级:

1)如果开发者只设置了width和height,当文字大小设置的是比较大的值的时候,文字超出组件大小,且以省略号方式显示;

2)如果开发者只设置了controlSize,没有设置width和height,组件宽高自适应文字,文字不超出组件,并设置最小宽度minWidth和最小高度minHeight;

3)如果controlSize、width、height接口都设置了,width和height设置的值生效,但如果width和height设置的值小于controlSize设置的最小宽度minWidth和最小高度minHeight,width和height设置的值不生效,宽高仍保持controlSize设置的最小宽度minWidth和最小高度minHeight。

menuItemContentModifier(modifier: ContentModifier<MenuItemConfiguration>)

定制Select下拉菜单项内容区的方法。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名类型必填说明
modifierContentModifier<MenuItemConfiguration>在Select组件上,定制下拉菜单项内容区的方法。
modifier: 内容修改器,开发者需要自定义class实现ContentModifier接口。

font

font(value: Font)

设置下拉按钮本身的文本样式。当size为0的时候,文本不显示,当size为负值的时候,文本的size按照默认值显示。

原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名类型必填说明
valueFont下拉按钮本身的文本样式。
API Version 11及以前默认值:
{
size: ‘16fp’,
weight: FontWeight.Medium
}
从API Version 12以后,
如果设置controlSize的值为:controlSize.SMALL,size默认值是’14fp’,否则还是’16fp’。

fontColor

fontColor(value: ResourceColor)

设置下拉按钮本身的文本颜色。

原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名类型必填说明
valueResourceColor下拉按钮本身的文本颜色。
默认值:‘#E5182431’

selectedOptionBgColor

selectedOptionBgColor(value: ResourceColor)

设置下拉菜单选中项的背景色。

原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名类型必填说明
valueResourceColor下拉菜单选中项的背景色。
默认值:‘#33007DFF’

selectedOptionFont

selectedOptionFont(value: Font)

设置下拉菜单选中项的文本样式。当size为0的时候,文本不显示,当size为负值的时候,文本的size按照默认值显示。

原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名类型必填说明
valueFont下拉菜单选中项的文本样式。
默认值:
{
size: ‘16fp’,
weight: FontWeight.Regular
}

selectedOptionFontColor

selectedOptionFontColor(value: ResourceColor)

设置下拉菜单选中项的文本颜色。

原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名类型必填说明
valueResourceColor下拉菜单选中项的文本颜色。
默认值:‘#ff007dff’

optionBgColor

optionBgColor(value: ResourceColor)

设置下拉菜单项的背景色。

原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名类型必填说明
valueResourceColor下拉菜单项的背景色。
默认值:‘#ffffffff’

optionFont

optionFont(value: Font)

设置下拉菜单项的文本样式。当size为0的时候,文本不显示,当size为负值的时候,文本的size按照默认值显示。

原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名类型必填说明
valueFont下拉菜单项的文本样式。
默认值:
{
size: ‘16fp’,
weight: FontWeight.Regular
}

optionFontColor

optionFontColor(value: ResourceColor)

设置下拉菜单项的文本颜色。

原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名类型必填说明
valueResourceColor下拉菜单项的文本颜色。
默认值:‘#ff182431’

space10+

space(value: Length)

设置下拉菜单项的文本与箭头之间的间距。不支持设置百分比。设置为null、undefined,或者小于等于8的值,取默认值。

原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名类型必填说明
valueLength下拉菜单项的文本与箭头之间的间距。
默认值:8

arrowPosition10+

arrowPosition(value: ArrowPosition)

设置下拉菜单项的文本与箭头之间的对齐方式。

原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名类型必填说明
valueArrowPosition下拉菜单项的文本与箭头之间的对齐方式。
默认值:ArrowPosition.END

menuAlign(alignType: MenuAlignType, offset?: Offset)

设置下拉按钮与下拉菜单间的对齐方式。

原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名类型必填说明
alignTypeMenuAlignType对齐方式类型。
默认值:MenuAlignType.START
offsetOffset按照对齐类型对齐后,下拉菜单相对下拉按钮的偏移量。
默认值:{dx: 0, dy: 0}

optionWidth11+

optionWidth(value: Dimension | OptionWidthMode )

设置下拉菜单项的宽度,不支持设置百分比。OptionWidthMode类型为枚举类型,OptionWidthMode决定下拉菜单是否继承下拉按钮宽度。

当设置为undefined、null、负数时,属性不生效,菜单项宽度设为默认值,即菜单默认宽度为2栅格。

当菜单项设置宽度小于最小宽度56vp时,菜单宽度回弹至2栅格。正常值范围大于等于0。

原子化服务API: 从API version 12开始,该接口支持在原子化服务中使用。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名类型必填说明
valueDimension | OptionWidthMode下拉菜单项的宽度。

optionHeight11+

optionHeight(value: Dimension)

设置下拉菜单显示的最大高度,不支持设置百分比。下拉菜单的默认最大高度是屏幕可用高度的80%,设置的菜单最大高度不能超过默认最大高度。

当设置为undefined、null、负数与零时,属性不生效,下拉菜单最大高度设为默认值,即下拉菜单最大高度默认值为屏幕可用高度的80%。

正常值范围大于0。如果下拉菜单所有选项的实际高度没有设定的高度大,下拉菜单的高度按实际高度显示。

原子化服务API: 从API version 12开始,该接口支持在原子化服务中使用。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名类型必填说明
valueDimension下拉菜单显示的最大高度。

menuBackgroundColor(value: ResourceColor)

设置下拉菜单的背景色。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名类型必填说明
valueResourceColor下拉菜单的背景色。
默认值:Color.Transparent

menuBackgroundBlurStyle(value: BlurStyle)

设置下拉菜单的背景模糊材质。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名类型必填说明
valueBlurStyle下拉菜单的背景模糊材质。
默认值:BlurStyle.COMPONENT_ULTRA_THICK

OptionWidthMode11+枚举说明

原子化服务API: 从API version 12开始,该接口支持在原子化服务中使用。

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

ArrowPosition10+枚举说明

原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。

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

原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。

名称描述
START按照语言方向起始端对齐。
CENTER居中对齐。
END按照语言方向末端对齐。
参数名类型必填说明
valueResourceStr下拉菜单项的文本内容。
iconResourceStr下拉菜单项的图片内容。
selectedboolean下拉菜单项是否被选中。
默认值:false
indexnumber下拉菜单项的索引。
triggerSelect(index: number, value: string) => void下拉菜单选中某一项的回调函数。
index: 选中菜单项的索引。
value: 选中菜单项的文本。
说明: index会赋值给事件onSelect回调中的索引参数; value会返回给Select组件显示,同时会赋值给事件onSelect回调中的文本参数。

事件

onSelect

onSelect(callback: (index: number, value: string) => void)

下拉菜单选中某一项的回调。

原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名类型必填说明
indexnumber选中项的索引。
valuestring选中项的值。

示例1

// 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(300)
        .onSelect((index:number, text?: string | undefined)=>{
          console.info('Select:' + index)
          this.index = index;
          if(text){
            this.text = text;
          }
        })
    }.width('100%')
  }
}
ts

示例2

该示例实现了一个自定义下拉菜选项的Select组件。自定义下拉菜单选项样式为“文本 + 图片 + 空白间隔 + 文本 + 绘制三角形”,点击菜单选项后Select组件显示菜单选项的文本内容。

import { MenuItemModifier } from '@ohos.arkui.modifier'

class MyMenuItemContentModifier implements ContentModifier<MenuItemConfiguration> {
  modifierText: string = ""
  constructor(text: string) {
    this.modifierText = text;
  }
  applyContent(): WrappedBuilder<[MenuItemConfiguration]> {
    return wrapBuilder(MenuItemBuilder)
  }
}

@Builder
function MenuItemBuilder(configuration: MenuItemConfiguration) {
  Row() {
    Text(configuration.value)
    Blank()
    Image(configuration.icon).size({ width: 40, height: 40 })
    Blank(30)
    Text((configuration.contentModifier as MyMenuItemContentModifier).modifierText)
    Path()
      .width('100px')
      .height('150px')
      .commands('M40 0 L80 100 L0 100 Z')
      .fillOpacity(0)
      .stroke(Color.Black)
      .strokeWidth(3)
  }
  .onClick(() => {
    configuration.triggerSelect(configuration.index, configuration.value.valueOf().toString())
  })
}

@Entry
@Component
struct SelectExample {
  @State text: string = "有modifier"
  build() {
    Column() {
      Row() {
        Select([{ value: 'item1', icon: $r("app.media.icon") },
          { value: 'item2', icon: $r("app.media.icon") }])
          .value(this.text)
          .onSelect((index:number, text?: string)=>{
            console.info('Select index:' + index)
            console.info('Select text:' + text)
          })
          .menuItemContentModifier(new MyMenuItemContentModifier("我来自Modifier"))

      }.alignItems(VerticalAlign.Center).height("50%")
    }
  }
}
ts

最后

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

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

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

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

鸿蒙(HarmonyOS NEXT)最新学习路线

 

  •  HarmonOS基础技能

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

  • 鸿蒙NaPi组件进阶

  • HarmonOS高级技能

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

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

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

《鸿蒙 (OpenHarmony)开发入门教学视频》

《鸿蒙生态应用开发V2.0白皮书》

图片

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

图片

 《鸿蒙开发基础》

  • ArkTS语言
  • 安装DevEco Studio
  • 运用你的第一个ArkTS应用
  • ArkUI声明式UI开发
  • .……

图片

 《鸿蒙开发进阶》

  • Stage模型入门
  • 网络管理
  • 数据管理
  • 电话服务
  • 分布式应用开发
  • 通知与窗口管理
  • 多媒体技术
  • 安全技能
  • 任务管理
  • WebGL
  • 国际化开发
  • 应用测试
  • DFX面向未来设计
  • 鸿蒙系统移植和裁剪定制
  • ……

图片

《鸿蒙进阶实战》

  • ArkTS实践
  • UIAbility应用
  • 网络案例
  • ……

图片

 获取以上完整鸿蒙HarmonyOS学习资料,请点击→纯血版全套鸿蒙HarmonyOS NEXT学习资料

总结

总的来说,华为鸿蒙不再兼容安卓,对中年程序员来说是一个挑战,也是一个机会。只有积极应对变化,不断学习和提升自己,他们才能在这个变革的时代中立于不败之地。 

  • 4
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值