鸿蒙小案例-搜索高亮

ops/2025/2/22 0:05:59/

搜索高亮目前官方也没有可以现成的组件,但是需求来了,怎么办,只能摸索着自己写一个
目前官方API中最接近的应该是 richText组件了,富文本组件,当然可以实现,但是有不少问题
1.大小调整太麻烦,跟组件各个不入,除非整屏都用richText,才看不出来,否则样式很难看
2.用richText显示的内容区域不支持滚动(页不是不支持,就是list自带的上拉下拉都不行,只能通过onTouch事件去写,但是那也太麻烦了)
基于上面两点,放弃这个组件,那就只能使用基础组件来实现了
先看下效果

搜索高亮展示

代码实现:

//检索关键字,并返回选中的歌曲,value=需要高亮的字,list=歌曲数组static  lineHigh(value: string, itemList: songClass[]) {const searchList: songClass[] = []itemList.some((item: songClass) => {if (item.name.includes(value) || item.author.includes(value)) {searchList.unshift(item)}})return searchList}

songClass = 歌曲对象,自己可替换成自己的对象
该方法传入 搜索关键词,被搜索对象数组,输出包含关键词的对象数组
应该在点击搜索后调用

页面代码

  //拿值去匹配 歌曲列表,全量 value=搜索关键词getSearchByValue(value: string) {this.searchList = CommUtils.lineHigh(value, this.menuItem.songList)}
Search({value: this.textValue,//placeholder: '搜索你想找的音乐',controller: this.searchController}).backgroundColor('#F3F3FA').onChange((value: string) => {value = value.replace(/\s+/g, '')this.textValue = value.replace(/\s+/g, '')if (this.textValue !== '') {this.isShowList = Visibility.Visible//拿值去匹配 歌曲列表,全量this.getSearchByValue(this.textValue)} else {this.isShowList = Visibility.None}}).textAlign(TextAlign.Start).height(30).borderRadius(60)

this.textValue = 搜索关键词
this.searchController = 搜索组件Controller
this.isShowList = 搜索结果是否显示

搜索结果区域

	....Text(){ForEach(item.name.split(''),(itemStr:string)=>{Span(itemStr).fontColor(this.textValue.includes(itemStr) || item.id === this.PlayState.id ?'#00AE68':'#000000').fontSize(15).fontWeight(FontWeight.Bold)})}.maxLines(1).textOverflow({ overflow: TextOverflow.Ellipsis })....

关键思路在:
用text包裹要显示的结果,循环每一个字,如果 搜索关键词包含这个字,就用绿色显示
这样我们也就能用最基本的组件显示出搜索高亮的效果了


http://www.ppmy.cn/ops/18819.html

相关文章

文字转粤语语音怎么转?文字转语音

文字转粤语语音怎么转?文字转粤语语音的应用,不仅展现了现代科技的魅力,也为我们提供了更加便捷的交流方式。它们将文字转化为粤语发音,让我们能够更直观地感受粤语的韵味和魅力。同时,这些软件还具备高度的可定制性&a…

ElasticSearch集群

我们ES集群主要解决的是这两个问题:海量数据存储问题、单点故障问题 海量数据存储问题:单机的ES,数据存储能力是有上限的 单点故障问题:如果单机上的Elasticsearch节点发生故障,整个系统会停止服务,导致数据…

山东专升本计算机基础 --- Windows 10 操作系统安全

文章目录 Windows 10 操作系统安全1、Windows 10 系统安装的安全2、系统帐户安全3、应用安全策略4、网络安全策略 Windows 10 操作系统安全 1、Windows 10 系统安装的安全 操作系统的安全和安装操作系统的选项密切相关。 选择 NTFS 文件格式分区组件的定制安装 Windows 10 …

常见的css面试题(持续更新,欢迎补充)

目录 1. 什么情况下设置margin会造成margin塌陷? 怎么解决? 2. css的选择器的优先级,怎么判断谁的优先级更高? 总结面试常问的css相关面试题~ 1. 什么情况下设置margin会造成margin塌陷? 怎么解决? 通常遇见margin塌陷&…

linux命令ar使用说明

ar 建立或修改备存文件,或是从备存文件中抽取文件 补充说明 ar命令 是一个建立或修改备存文件,或是从备存文件中抽取文件的工具,ar可让您集合许多文件,成为单一的备存文件。在备存文件中,所有成员文件皆保有原来的属…

MVP+敏捷开发

MVP敏捷开发 1. 什么是敏捷开发? 敏捷开发是一种软件开发方法论,旨在通过迭代、自组织的团队和持续反馈,快速响应需求变化并交付高质量的软件。相较于传统的瀑布模型,敏捷开发强调灵活性、适应性和与客户的紧密合作。敏捷开发方…

游戏发行困境及OgGame云游戏解决方案简述

随着全球化浪潮的持续推进,中国游戏开发者们不再满足于国内市场的发展,而是开始将目光投向更为广阔的海外市场。这一趋势的崛起背后,是中国企业意识到国际化是其发展的必由之路,也是游戏行业突破国内困境的体现。本文将简要阐述游…

c++补充

构造函数、析构函数 #include <iostream> using namespace std;// 构造函数、析构函数 // --- "构造函数"类比生活中的"出厂设置" --- // --- "析构函数"类比生活中的"销毁设置" --- // 如果我们不写这两种函数&#xff0c;编译…