鸿蒙小案例-搜索高亮

news/2024/9/25 16:15:39/

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

相关文章

WPF 资源基础

动态资源/静态资源 UI代码 <Window x:Class"WpfApp1.MainWindow"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d"http://schemas.microsoft.com/ex…

Kubernetes - CentOS7搭建k8s_v1.18集群高可用(kubeadm/二进制包部署方式)实测配置验证手册

Kubernetes - CentOS7搭建k8s集群高可用&#xff08;kubeadm/二进制包部署方式&#xff09;实测配置验证手册 前言概述&#xff1a; 一、Kubernetes—k8s是什么 Kubernetes 这个名字源于希腊语&#xff0c;意为“舵手“或”飞行员"。 Kubernetes&#xff0c;简称K8s&#…

clickhouse与oracle传输数据

参考 https://github.com/ClickHouse/clickhouse-jdbc-bridge https://github.com/ClickHouse/clickhouse-jdbc-bridge/blob/master/docker/README.md clickhouse官方提供了一种方式&#xff0c;可以实现clickhouse与oracle之间传输数据&#xff0c;不仅仅是oracle&#xff0…

中电金信:向“新”而行——探索融合架构的项目管理在保险行业的应用

近年来&#xff0c;险企在政策推动、市场牵引、自身发展、新技术应用日趋成熟等内外部因素的驱动下&#xff0c;积极投身到数字化转型的浪潮中。在拜访各类保险客户和合作项目的过程中&#xff0c;我们发现不少险企在数字化转型中或多或少都面临着战略如何落地、技术如何承接和…

基于 Spring Boot 博客系统开发(三)

基于 Spring Boot 博客系统开发&#xff08;三&#xff09; 本系统是简易的个人博客系统开发&#xff0c;为了更加熟练地掌握 SprIng Boot 框架及相关技术的使用。&#x1f33f;&#x1f33f;&#x1f33f; 基于 Spring Boot 博客系统开发&#xff08;二&#xff09;&#x1f…

yolov8 dll 编译

1. 每次用yolo v8 都要用python &#xff0c;对于我这种写软件的太不方便了&#xff0c;下面尝试编译dll 调用, 我已经有做好的模型.best.pt 参考视频方法: yolov8 TensorRT C 部署_哔哩哔哩_bilibili 【yolov8】tensorrt部署保姆级教程&#xff0c;c版_哔哩哔哩_bilibili 需…

深入理解Java消息中间件-Apache Kafka

在数字化时代&#xff0c;数据如同血液一样流动于现代应用的每一个角落。如何高效、可靠地处理这些数据流&#xff0c;成为了构建响应式、可扩展和弹性系统的关键挑战。作为一名专业的Java技术架构师和作家&#xff0c;我将深入分析Apache Kafka这一广泛使用的Java消息中间件解…

[C++学习记录]---实现写文件和读文件

前言 C中写文件和读文件基本原理。都是通过文件流对象来实现的&#xff0c;可以通过适当的打开模式来控制文件的读写行为。 正文 01-写文件 具体代码解释如下&#xff1a; 包含头文件&#xff1a; 首先需要包含 <fstream> 头文件&#xff0c;这个头文件包含了对…