鸿蒙小案例-搜索高亮

搜索高亮目前官方也没有可以现成的组件，但是需求来了，怎么办，只能摸索着自己写一个
目前官方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 })....