踏入鸿蒙世界的敲门砖，标志着您在技术征途上的全新起点，提升就业竞争力，获得行业认可，点亮职业成长先机，快人一步抢占未来应用开发赛道！https://developer.huawei.com/consumer/cn/training/dev-cert-detail/101666948302721398

背景

在项目中遇到了一个下拉选择框组件的开发需求：

· 选择框的三角箭头需要在点击时跟随转动。

· 弹出的选择框需要基本满框弹出。

· 选择框显示选择的项的方式为后面加一个✔的符号或图片。

· 选择框选择不是第一个默认的时候，需要提供一个不同颜色的显示提醒用户。

· 选择框需要提供方法，实现选择第一列的数值的时候，可以格式化成其他的文字内容。

根据测试发现，系统自带的Select组件的自定义无法满足想要的效果，因此根据多次的测试后，选择使用Toggle+bindMenu的方式，实现对组件的最大自定义封装。并提供了Option设置类，代码复制后可以直接使用。

实现效果

代码文件

SelectDemo

调用使用页面文件

ToggleMenuOption

自定义组件配置类，提供了是否显示菜单，选中字符、菜单索引等组件内容设置，大家可以根据自己的需求修改当前类的内容，可以添加和删减

ToggleMenu

封装组件

总结

上述文章是对下拉框选择组件的一种封装和实现的方式，其中也遇到了一些问题，比如说：

· 菜单组件的宽度设置成“100%”的时候，菜单会自动内缩一段距离，然后也没有办法进行调整，如果弹出菜单内容的宽度也设置成100%的话，会出现超出界面不显示的问题。（希望后面会解决这个问题）

希望这篇文章对大家可以有所帮助，或者有什么可以改进的地方，欢迎大家交流（转载自CSDN，作者：baobao熊）