前言

其实前边三篇文章,我们已经把要实现的功能都进行实现了,无论是列表展示,还是数据编辑,样式修改,换肤等等,已经达到了可交付的状态,当然了,目前的这个小项目也已经上架到了鸿蒙系统的应用商店,名字是随心记,大家可以边做项目边进行体验,本篇文章,会把最后一点的搜索功能实现,另外再总结一下这个小项目用到的知识点。

我们可以简单看下,目前已经完成的效果。

备忘录首页,条目颜色跟着皮肤联动。

鸿蒙元服务项目实战:终结篇之备忘录搜索功能实现_鸿蒙项目开发

内容编辑页面,可以设置样式和换肤。

鸿蒙元服务项目实战:终结篇之备忘录搜索功能实现_鸿蒙元服务_02

搜索功能实现

目前,搜索功能是和列表页绑定在一起的,一是共用组件,减少页面和代码,二是,本身功能并不复杂,合并在一个页面也更加直观表达。

点击搜索框,输入内容进行搜索后,过滤出和搜索内容匹配的数据进行展示,点击搜索框右边的叉号,就还原所有的数据。

针对之前的列表数据加载,我们只需要改造一番即可,增加关键搜索词,搜索时传递,其它调用时不传,并使用filter函数进行过滤和搜索匹配的数据。

doData(keyWord?: string) {
          
          
    try {
          
          
      this.doContentEmpty()
      this.mListContentBean = []
      DataPreferences.getInstance