本文同步发表于 微信公众号，微信搜索 程语新视界 即可关注，每个工作日都有文章更新

HarmonyOS (ArkUI) 中的 Select 组件的核心是提供一个下拉选择菜单，让用户在预设的多个选项中进行单项选择。

一、核心功能

Select 组件的使用主要围绕三个核心部分展开：创建选项、设置选中项、响应选择事件。

1. 创建组件与选项列表
这是构建 Select 的第一步，通过 Select(options: Array<SelectOption>) 接口传入一个选项数组。每个选项都是一个 SelectOption 对象，主要包含以下属性：

// 一个包含图标和Symbol图标的选项列表示例
Select([
  { value: '选项一', icon: $r('app.media.icon1') },
  { value: '选项二', symbolIcon: $r('sys.media.ohos_app_icon') }, // 使用系统Symbol图标
  { value: '选项三' }
])

2. 设置选中项
使用 .selected() 属性可以设置下拉菜单初始选中的选项。索引值从 0 开始。这里有一些行为规则需要注意：

• 如果不设置或设置异常值，默认选中索引为 -1（无选中项）。

• 如果设置为 undefined 或 null，则会选中第一项（索引0）。

• 从API 10开始，该属性支持$$双向绑定变量；从API 18开始，新增对!!双向绑定变量的支持。

3. 响应选择事件
当用户选择一个选项后，可以通过 onSelect 事件回调获取选择结果，它返回两个参数：index（选中项的索引）和 value（选中项的值）。

Select([...])
  .selected(0) // 默认选中第一项
  .onSelect((index: number, value?: string) => {
    console.info(`选中了第${index}项，值是：${value}`);
    // 可以在这里更新界面状态或执行业务逻辑
  })

二、样式与自定义

Select 组件提供了丰富的属性来自定义外观，从按钮本身到下拉菜单项都可以细致调整。

对于有极高自定义需求的场景（例如完全改变菜单项布局），可以使用 menuItemContentModifier (API 12+) 属性。它能完全接管下拉菜单项内容的渲染，但请注意，使用此功能后，上述大部分样式属性将不再生效。

三、进阶特性

1. 高级特性：完全自定义菜单项内容 (menuItemContentModifier)、设置分割线 (divider) 等高级属性。当系统自带组件无法满足需求时，进行完全的自定义封装。

2. 状态与尺寸管理：当选项变化或需要动态控制组件大小时，记得将选项数据或 selected 索引用 @State 装饰，这样界面才会同步更新。同时，controlSize、width 和 height 属性存在优先级规则，通常优先使用 controlSize 以确保文本显示完整。

3. 动态属性设置：如果想根据某些条件动态地添加或移除某个属性（而不仅仅是改变属性值），可以用 attributeModifier 接口。该接口提供了更精细的控制能力。

使用步骤总结

1. 导入与声明：确保在 .ets 文件中正确导入组件，并使用 @State 管理选中状态。

2. 构建选项：准备一个 SelectOption 数组，定义每个选项的 value，并可选择性地添加 icon。

3. 配置组件：通过链式调用设置 selected（初始选中）、value（按钮文本）以及字体、颜色等样式。

4. 处理事件：在 onSelect 回调中编写逻辑，处理用户的选择。