#HarmonyOS NEXT体验官#HarmoneyOS NEXT应用开发实战《实现持久化搜索记录》原创

小黄要努力

发布于 2024-7-31 12:55

6252浏览

0收藏

每一个app都必须有的功能是什么呢？最常用的功能又是什么呢？

没错，就是我们的搜索功能，有了搜索功能输入关键字即可触达相应区域，不管是工作还是娱乐，效率都大大提高

那么想要在鸿蒙中实现一个完整的搜索模块我们应该怎么做呢？

跟上我的节奏，阅读此文，轻松掌握搜索模块开发

话不多说，让我们有请今天的主角登场

#HarmonyOS NEXT体验官#HarmoneyOS NEXT应用开发实战《实现持久化搜索记录》-鸿蒙开发者社区

上图就是我们的搜索模块，图中可以看出搜索模块由

返回图标、文本输入框、搜索按钮、搜索历史列表、列表删除、条目删除这几个功能点构成

搜索历史列表是要常驻的，我们的页面开启和关闭，信息都要保存起来，用户下次打开可以直接渲染，直接点击即可搜索

列表删除同时还会弹出一个用户提示弹窗，确认后清空列表（如下图所示）

#HarmonyOS NEXT体验官#HarmoneyOS NEXT应用开发实战《实现持久化搜索记录》-鸿蒙开发者社区

返回图标、文本输入框、搜索按钮的实现我们使用ROW容器包裹对应组件，实现如下

Row(){          
          Image($r('app.media.iv_back'))            
          .height(25)            
          .width(25)            
          .interpolation(ImageInterpolation.High)
          .margin({left:10,right:10})         

 Row(){            
          TextInput({text:this.value,controller:this.controller})              
          .type(InputType.Password)             
          .onChange((value:string)=>{                
          this.value=value              })              
          .width(200)            

Image($r('app.media.xiangji'))              
          .height(25)              
          .width(25)              
          .margin({left:10})            

Button("搜索")              
          .width(60)              
          .height(30)              
          .fontSize(14)              
          .backgroundColor("#fffc8345")              
          .margin({left:10})          
        }          
          .width('100%')          
          .layoutWeight(1)          
          .borderRadius(25)          
          .backgroundColor(Color.White)       
        }        
          .padding({top:15})        
          .backgroundColor(Color.White)1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.

#HarmonyOS NEXT体验官#HarmoneyOS NEXT应用开发实战《实现持久化搜索记录》-鸿蒙开发者社区

输入框的内容我们定义一个@State value:string=''来进行监听。

接下来是列表的实现，列表的组件我们使用ArkUI提供的 list组件，数据源我们定义一个空的数组 @State txtList:string[]=[]当我们点击搜索按钮时，把我们刚才定义的value 通过 this.txtList.push(this.value)的方式添加进数组中。添加完成之后把数据展示到list组件上，这样我们记录的ui显示就做好了，但是我们关掉app再次打开，刚才添加的数据就不见了，这时候我们就要用到第二个知识点

向大家隆重介绍鸿蒙的轻量级存储，用户首选项（Preferences）

什么是用户首选项

提供Key-Value键值型的数据处理能力，支持应用持久化轻量级数据，并对其修改和查询。当用户希望有一个全局唯一存储的地方，可以采用用户首选项来进行存储。Preferences会将该数据缓存在内存中，当用户读取的时候，能够快速从内存中获取数据，当需要持久化时可以使用flush接口将内存中的数据写入持久化文件中。Preferences会随着存放的数据量越多而导致应用占用的内存越大，因此，Preferences不适合存放过多的数据，也不支持通过配置加密，适用的场景一般为应用保存用户的个性化设置（字体大小，是否开启夜间模式）等

用户首选项运作机制

#HarmonyOS NEXT体验官#HarmoneyOS NEXT应用开发实战《实现持久化搜索记录》-鸿蒙开发者社区

我们使用用户首选项的保存方法，把我们的数组存储进去因为接收的参数是string类型所以我们要转换一下存储

dataPreferences.putSync('startup', txtList.toString());

这样我们的数据就会实现持久化保存，app不管怎么打开关闭都不怕了

取出数据使用如下方法

let val = dataPreferences.getSync('startup');我们通过key 把存入的数据取出，转换后赋值给list ，这样我们就可以加载历史数据显示到List组件上了

小tips：可以看到我们的列表比较简单并且条目只有一个文本，所以可以不需要@build 进行分离

#HarmonyOS NEXT体验官#HarmoneyOS NEXT应用开发实战《实现持久化搜索记录》-鸿蒙开发者社区

实现如下

build() {
    Column() {
      TextInput()
      List(){
        ForEach(this.txtList,(item:string,index:number)=>{
          ListItem(){
            Column(){
              Text(item)
            }
          }
        })
      }

    }
    .height('100%')
    .width('100%')
  }1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.

#HarmonyOS NEXT体验官#HarmoneyOS NEXT应用开发实战《实现持久化搜索记录》-鸿蒙开发者社区

弹窗的实现我们需要用到鸿蒙的自定义弹窗（代码如下）

@CustomDialog
struct CustomDialogExample {
  cancel?: () => void
  confirm?: () => void
  controller: CustomDialogController

  build() {
    Column() {
      Text('是否清空搜索历史').fontSize(20).margin({ top: 10, bottom: 10 })
      Flex({ justifyContent: FlexAlign.SpaceAround }) {
        Button('取消')
          .onClick(() => {
            this.controller.close()
            if (this.cancel) {
              this.cancel()
            }
          }).backgroundColor(0xffffff).fontColor(Color.Black)
        Button('清空')
          .onClick(() => {
            this.controller.close()
            if (this.confirm) {
              this.confirm()
            }
          }).backgroundColor(0xffffff).fontColor(Color.Red)
      }.margin({ bottom: 10 })
    }
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.

我们在弹窗中定义了confirm?: () => void那我们在组件中调用弹窗时使用如下代码

dialogController: CustomDialogController = new CustomDialogController({
builder: CustomDialogExample({
cancel: ()=> { this.onCancel() },
confirm: ()=> { this.onAccept() },
}),
})
onCancel() {
console.info('Callback when the first button is clicked')
}
onAccept() {
This.txtList.length=0
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

我们只需要在onAccept方法中把txtList清空就好了

这样我们的持久化搜索记录功能就实现了

分类

HarmonyOS

标签

harmonyOS next

51CTO

51CTO博客

51CTO学堂

#HarmonyOS NEXT体验官#HarmoneyOS NEXT应用开发实战《实现持久化搜索记录》原创

订阅鸿蒙技术特刊，精选内容抢先看

51CTO

51CTO博客

51CTO学堂

#HarmonyOS NEXT体验官#HarmoneyOS NEXT应用开发实战《实现持久化搜索记录》 原创

订阅鸿蒙技术特刊，精选内容抢先看

#HarmonyOS NEXT体验官#HarmoneyOS NEXT应用开发实战《实现持久化搜索记录》原创