鸿蒙5.0版开发：ArkTS基础组件（Select）

于 2024-09-19 15:49:26 发布
阅读量904 收藏 24
点赞数 22
分类专栏： ArkUI 鸿蒙5.0 ArkTS 文章标签： harmonyos 华为 android 前端 鸿蒙 ArkTS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_69424697/article/details/142362538
版权
ArkUI 同时被 3 个专栏收录
99 篇文章 0 订阅
订阅专栏
鸿蒙5.0
99 篇文章 0 订阅
订阅专栏
ArkTS
95 篇文章 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%')
  }
}

示例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%")
    }
  }
}

看完三件事❤️

  • 如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
  • 点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
  • 关注作者，不定期分享原创知识。
  • 同时可以期待后续文章ing🚀。 
星星不闪包退1
关注
专栏目录
鸿蒙应用开发之下拉菜单选择组件
大坡3D软件开发
04-16 569
Select([{ value: '菜单1', icon: $r('app.media.demo3') },由于它是下拉式的菜单，所以候选的内容建议不要太多，否则会滚动比较麻烦。{ value: '菜单4', icon: $r('app.media.demo3') }]){ value: '菜单2', icon: $r('app.media.demo3') },{ value: '菜单3', icon: $r('app.media.demo3') },设置下拉菜单初始选项的索引，第一项的索引为0。
鸿蒙开发实战项目(十):ArkTS与H5的交互（ArkTS）
sybh的博客
01-26 1385
本篇Codelab主要介绍H5如何调用原生侧相关功能，并在回调中获取执行结果。以“获取通讯录”为示例分步讲解JSBridge桥接的实现。
鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：Menu）
m0_64420071的博客
03-11 1109
ArkTS声明式开发-基础手势：Menu
鸿蒙（HarmonyOS）下拉选择控件
最新发布
Jafer的博客
07-25 744
鸿蒙（HarmonyOS）下拉选择控件 Select 操作系统: Windows 11 专业版、IDE:DevEco Studio 3.1.1 Release、SDK:HarmonyOS 3.1.0（API 9）
【鸿蒙软件开发】ArkTS基础组件之Select(下拉菜单)、Slider(滑动条)
m0_62599305的博客
10-28 4109
Select组件：提供下拉选择菜单，可以让用户在多个选项之间选择。Slider组件：滑动条组件，通常用于快速调节设置值，如音量调节、亮度调节等应用场景。Select组件：提供下拉选择菜单，可以让用户在多个选项之间选择。Slider组件：滑动条组件，通常用于快速调节设置值，如音量调节、亮度调节等应用场景。
HarmonyOS-UIAbitity-Select——【坚果派-红目香薰】
红目香薰
02-22 911
HarmonyOS-UIAbitity-Select——【坚果派-红目香薰】
鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：Select）
m0_64420071的博客
03-12 1982
ArkTS声明式开发（基础手势：Select）
鸿蒙selector的使用方式
shenfei平凡之路
07-15 530
在官网文档中，并没有详细说明按钮点击效果如何使用selector的使用方式等。因为系统还需完善，只能自己慢慢摸索了。 控件焦点状态如下，这个是动态jave代码添加组件状态时使用。 package ohos.agp.components; public class ComponentState { public static final int COMPONENT_STATE_CHECKED = 64; //被选中 public static final int COMPONENT_STAT
从零开始的HarmonyOS Next开发指南：打造HarmonyOS NEXT元服务
一键难忘的博客
05-26 5295
DevEco Studio 4.0是一个集成开发环境（IDE），专门为开发者提供一站式的HarmonyOS应用和服务开发支持。以下是DevEco Studio 4.0的一些主要特点：高效智能代码编辑：支持多种语言，如ArkTS、JavaScript、C/C++等，提供代码高亮、智能补齐、错误检查、自动跳转、格式化、查找等功能，以提升代码编写的效率。低代码可视化开发：拥有丰富的UI界面编辑能力，支持自由拖拽组件和可视化数据绑定，能够快速预览效果，所见即所得。
鸿蒙HarmonyOS应用开发：扫描仪文件扫描
yushulx的专栏
10-20 1151
华为鸿蒙HarmonyOS已经发展到4.0，使用ArkTS作为开发语言。这篇文章结合Dynamsoft Service开发一个简单的鸿蒙应用，用来获取办公室里连接PC的扫描仪()，把文档扫描到手机里。
HarmonyOS 鸿蒙开发测试:单元测试框架
sybh的博客
01-22 1446
单元测试框架包括Java单元测试框架和JavaScript单元测试框架，它们是HarmonyOS中分别基于Java语言和JavaScript语言编写的应用的测试框架，提供基础的单元测试能力。Java单元测试框架基于JUnit开源框架和Ability支持单元测试和应用组件(Ability)测试支持编写数据驱动测试用例支持API压力测试/组合测试支持编写应用UI测试支持分布式场景的多设备应用UI测试。
鸿蒙实战开发(三) HUAWEI Codelabs 一次开发，多端部署-音乐专辑（ArkTS）
sybh的博客
01-25 1290
本篇Codelab基于自适应布局和响应式布局，实现一次开发，多端部署音乐专辑。介绍手机、折叠屏、平板等不同屏幕尺寸设备的页面设计和实现方案，通过合理的工程结构组织代码，以及解决系统能力差异的兼容性问题。
鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：Search）
m0_64420071的博客
03-12 1733
ArkTS声明式开发（基础手势：Search）
鸿蒙ArkUI下拉列表组件
luck332的专栏
02-01 584
鸿蒙ArkUI下拉列表组件，官方提供的只是基础使用，在使用过程非常不方便，我们进行了组件的封装。使用也是非常得简单只需要调用组件。
如何使用命令行对RK开发板进行OpenHarmony版本烧录？
m0_64420071的博客
03-29 1585
开发版烧录
OpenHarmony实战开发-NAPI封装ArkTS接口案例。
m0_70749039的博客
04-17 1305
部分应用的主要开发语言为C/C++，但是HarmonyOS的部分接口仅以ArkTS的形式暴露，因此需要将ArkTS的接口封装为Native接口。本例以DocumentViewPicker的Select方法为例，提供了Napi封装ArkTS API的通用方法，本例包含内容如下：
【HarmonyOS4.0】第四篇-ArkUI基础实战
weixin_42533732的博客
01-08 2700
ArkUI开发框架是方舟开发框架的简称，它是一套构建 HarmonyOS / OpenHarmony 应用界面的声明式UI开发框架，它使用极简的UI信息语法、丰富的UI组件以及实时界面语言工具，帮助开发者提升应用界面开发效率 30%，开发者只需要使用一套 TS / JS API，就能在多个 HarmonyOS / OpenHarmony 设备上提供既丰富又流畅的用户界面体验。
ArkTS 任务统计页面
a_strong_pig的博客
12-15 870
ArkTS 实现一个任务统计案例
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值