# 鸿蒙自定义 MenuBuilde下拉选择组件

**Repository Path**: wangweihao111111/Pull-down-to-select-components

## Basic Information

- **Project Name**: 鸿蒙自定义 MenuBuilde下拉选择组件
- **Description**: 该组件支持自定义下拉箭头图标，可灵活控制文本样式，还能优化视觉反馈。核心功能包括动态图标系统，依菜单显隐切换图标；智能状态管理，精准记录选择状态与索引；视觉反馈优化，未选文本置灰、选中项背景高亮；通过数组动态生成选项。使用时仅需导入组件并配置图标路径、选项数组等参数，即可快速集成。相比原生组件，在样式定制、反馈效果和回调灵活性上均有显著优势，还可扩展图标动画、多语言适配等功能，满足多样化开发需求
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-10
- **Last Updated**: 2025-09-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 鸿蒙, HarmonyOS组件

## README


@[toc]
### 鸿蒙自定义下拉选择组件开发指南 
**为什么要做这个**
今天在开发鸿蒙应用时，我遇到了一个棘手的样式定制问题：官方提供的 Select 组件 虽然稳定性和易用性都很出色，但在实际开发中存在限制：

官方文档中部分样式属性需要在 API 20 及以上版本才能使用，而我的项目需要兼容更低版本，导致样式定制需求完全无法满足。

为解决这个问题，我翻遍了鸿蒙官方文档，却始终没找到适配低版本的解决方案；上网搜索时，相关内容要么是收费教程，要么是基于旧版 API 的过时文章。

最终，我决定自己 “手搓” 一个自定义 Select 组件，虽然组件功能和细节可能还有些粗糙，但已能满足基础使用需求。下面我会记录该组件的完整使用教程，也欢迎大家在评论区交流优化思路。如果这份内容能够帮助到你，**非常荣幸**。

**原生鸿蒙`<select>`组件存在两个限制：**  
1. 无法自定义下拉箭头图标  
2. 无法灵活控制文本样式  
3. 箭头图标固定：下拉箭头是系统自带的，没法替换成设计稿里的自定义图标，视觉统一性差；

通过自定义组件[MenuBuilde ](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-menu#%E7%A4%BA%E4%BE%8B3%E8%AE%BE%E7%BD%AEmenu%E5%AD%90%E8%8F%9C%E5%8D%95%E5%B1%95%E5%BC%80%E7%AC%A6%E5%8F%B7)完美解决这些问题，**实现效果如下**： 
 
**修改前原生组件：**
![输入图片说明](https://foruda.gitee.com/images/1757515926973327934/d53c117f_15636452.png "Snipaste_2025-09-10_21-56-00.png")

  **修改后效果：**
![输入图片说明](https://foruda.gitee.com/images/1757515894285063785/440874c8_15636452.png "Snipaste_2025-09-10_21-32-34.png")

---


#### 核心代码解析  
```typescript
@Preview
@Component
export struct MenuBuilde {
  // 关键属性定义
  @Prop img0: string = ''  // 默认箭头图标路径
  @Prop img1: string = ''  // 激活状态箭头图标路径
  @Prop menuItermList: string[] = ['']  // 选项数据源
  @Prop selectedValue: string = '请选择' // 默认提示文本
  
  // 状态管理
  @State private isMenuVisible: boolean = false
  @State private ischoose: boolean = false
  @State selectedID: number = -1
  
  // 回调函数
  private returnToSelection?: (value: string) => void
  
  build() {
    Row({ space: 10 }) {
      // 动态文本样式
      Text(this.selectedValue)
        .fontColor(!this.ischoose ? '#dcdcdc' : Color.Black)
      
      // 动态切换箭头图标
      if (this.ischoose) {
        Image(this.isMenuVisible ? $r(this.img0) : $r(this.img1))
          .size({ width: '20vp', height: '20vp' })
          .fillColor(Color.Black)  // 已选择状态着色
      } else {
        Image(this.isMenuVisible ? $r(this.img0) : $r(this.img1))
          .size({ width: '20vp', height: '20vp' })
      }
    }
    // 菜单绑定与事件处理
    .bindMenu(this.MenuBuilder(this.menuItermList), {
      onAppear: () => this.isMenuVisible = true,
      onDisappear: () => this.isMenuVisible = false
    })
    .onClick(() => this.isMenuVisible = !this.isMenuVisible)
  }

  // 菜单构建器
  @Builder
  MenuBuilder(itemList: string[]) {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {
      ForEach(itemList, (item: string, index) => {
        Row() {
          Text(item)
            .layoutConfig({ width: '100%', height: 32 })
            .textStyle({ 
              weight: 400, 
              size: 14, 
              color: Color.Black, 
              align: TextAlign.Center 
            })
        }
        // 选中项高亮
        .backgroundColor(this.selectedID == index ? '#f1f4f9' : Color.White)
        .borderRadius(10)
        .onClick(() => {
          this.selectedID = index
          this.ischoose = true
          this.selectedValue = item
          this.returnToSelection?.(item)  // 执行回调
        })
        
        // 添加分隔线
        if (index != itemList.length - 1) {
          Divider().height(10).width('80%').color('#ccc')
        }
      })
    }
    .width(100)  // 菜单宽度控制
  }
}
```

---

#### 四大核心功能  
1. **动态图标系统**  
   - 通过`img0`/`img1`属性注入自定义图标资源  
   - 根据`isMenuVisible`状态自动切换图标  
   *示例代码*：  
   ```typescript 
   Image(this.isMenuVisible ? $r(this.img0) : $r(this.img1))
   ```

2. **智能状态管理**  
   - `ischoose`标记选择状态  
   - `selectedID`记录当前选中项索引  
   - `isMenuVisible`控制菜单显隐  

3. **视觉反馈优化**  
   - 未选择时文本置灰 (`#dcdcdc`)  
   - 选中项背景高亮 (`#f1f4f9`)  
   - 图标点击后黑色填充 (`fillColor`)  

4. **数据驱动架构**  
   - 通过`menuItermList`传入选项数组  
   - 使用`ForEach`动态生成菜单项  

---

#### 使用教程  
**步骤1：导入组件**  
```typescript
import { MenuBuilde } from './MenuBuilde'
```

**步骤2：配置参数**  
```typescript
@Entry
@Component
struct Example {
  @State currentVal: string = "苹果"
  private options: string[] = ["苹果", "香蕉", "橙子"]

  build() {
    Column() {
      MenuBuilde({
        img0: "app.media.arrow_up",  // 自定义向上箭头
        img1: "app.media.arrow_down",// 自定义向下箭头
        menuItermList: this.options,
        selectedValue: this.currentVal
      })
      .onSelectionChange((val) => this.currentVal = val) // 回调绑定
    }
  }
}
```

**参数说明表**  
| 参数名          | 类型       | 必填 | 说明                  |
|-----------------|------------|------|-----------------------|
| `img0`          | string     | 是   | 默认状态图标路径      |
| `img1`          | string     | 是   | 激活状态图标路径      |
| `menuItermList` | string[]   | 是   | 选项文本数组          |
| `selectedValue` | string     | 否   | 初始选中项（默认"请选择"）|

---

#### 扩展建议  
1. **增加图标动画**  
   在`onClick`中添加旋转动画：  
   ```typescript 
   .onClick(() => {
     animateTo({ duration: 200 }, () => {
       this.rotateAngle = this.isMenuVisible ? 180 : 0
     })
   })
   ```
   
2. **支持图标尺寸参数化**  
   新增`@Prop iconSize: number = 20`属性  
   替换写死的`20vp`尺寸值  

3. **多语言适配**  
   将`selectedValue`绑定资源文件：  
   ```typescript
   @Prop selectedValue: Resource = $r('app.string.please_select')
   ```

---

#### 效果对比  
| 特性         | 原生Select | 自定义MenuBuilde |
|--------------|------------|------------------|
| 图标自定义   | ❌          | ✔️               |
| 文本样式控制 | ❌          | ✔️               |
| 选中态反馈   | 基础实现   | 高亮动画         |
| 回调灵活性   | 有限       | 完全可控         |