【HarmonyOS NEXT】【自定义组件】下拉选择框

2025-12-03 17:34之家网站 - -

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

背景

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

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

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

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

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

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

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

实现效果

代码文件

SelectDemo

调用使用页面文件

ToggleMenuOption

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

ToggleMenu

封装组件

总结

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

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

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

广告声明:文内含有的对外跳转链接(包括不限于超链接、二维码、口令等形式),用于传递更多信息,节省甄选时间,结果仅供参考,IT之家所有文章均包含本声明。

文章价值:
人打分
有价值还可以无价值
置顶评论
    热门评论
      文章发布时间太久,仅显示热门评论
      全部评论
      一大波评论正在路上
        取消发送
        分享成功

        长按关注IT之家公众号
        阅读更多精彩文章

        查看更多原创好文
        软媒旗下人气应用

        如点击保存海报无效,请长按图片进行保存分享