《仿盒马》app开发技术分享-- 商品搜索页（顶部搜索bar热门搜索）（端云一体）

开发准备

随着开发功能的逐渐深入，我们的应用逐渐趋于完善，现在我们需要继续在首页给没有使用按钮以及组件添加对应的功能，这一节我们要实现的功能是商品搜索页面，这个页面我们从上到下开始实现功能，首先就是一个搜索的bar，然后是一个系统推荐的热门搜索列表。

功能分析

要实现顶部的搜索bar其实还是非常简单的，我们只需要使用对应的row布局去填充对应的组件，然后根据输入状态来实现对应组建的展示和隐藏即可，热门搜索列表我们需要在云端新建对应的表，填充数据后，进行云数据库数据的请求

代码实现

首先我们先创建对应的表

{"objectTypeName": "search_hot_txt","fields": [{"fieldName": "id", "fieldType": "Integer", "notNull": true, "belongPrimaryKey": true},{"fieldName": "txt", "fieldType": "String" }],"indexes": [{"indexName": "field1Index", "indexList": [{"fieldName":"id","sortType":"ASC"}]}],"permissions": [{"role": "World", "rights": ["Read"]},{"role": "Authenticated", "rights": ["Read", "Upsert"]},{"role": "Creator", "rights": ["Read", "Upsert", "Delete"]},{"role": "Administrator", "rights": ["Read", "Upsert", "Delete"]}]
}

对应的实体类

class SearchHotTxt {id: number;txt: string;constructor() {}getFieldTypeMap():  Map<string, string> {let fieldTypeMap = new Map<string, string>();fieldTypeMap.set('id', 'Integer');fieldTypeMap.set('txt', 'String');return fieldTypeMap;}getClassName(): string {return 'search_hot_txt';}getPrimaryKeyList(): string[] {let primaryKeyList: string[] = [];primaryKeyList.push('id');return primaryKeyList;}getIndexList(): string[] {let indexList: string[] = [];indexList.push('id');return indexList;}getEncryptedFieldList(): string[] {let encryptedFieldList: string[] = [];return encryptedFieldList;}setId(id: number): void {this.id = id;}getId(): number  {return this.id;}setTxt(txt: string): void {this.txt = txt;}getTxt(): string  {return this.txt;}static parseFrom(inputObject: any): SearchHotTxt {let result = new SearchHotTxt();if (!inputObject) {return result;}if (inputObject.id) {result.id = inputObject.id;}if (inputObject.txt) {result.txt = inputObject.txt;}return result;}
}export { SearchHotTxt };

对应的db类

import { cloudDatabase } from '@kit.CloudFoundationKit';class search_hot_txt extends cloudDatabase.DatabaseObject {public id: number;public txt: string;public naturalbase_ClassName(): string {return 'search_hot_txt';}
}export { search_hot_txt };

之后我们创建对应的商品搜索页面，在页面中实现一个bar

//先创建好对应的变量
@State text: string = ''controller: TextInputController = new TextInputController()@State searchTxt:SearchHotTxt[]=[]@State flag:boolean=false@State isSearch:boolean=false@State columns: number = 2

实现布局

 Row(){Image($r('app.media.left_back')).height(20).width(20).onClick(()=>{router.back()})TextInput({ text: this.text, placeholder: '输入商品名搜索', controller: this.controller }).placeholderColor(Color.White).placeholderFont({ size: 16, weight: 400 }).caretColor(Color.White).width(200).fontSize(16).fontColor(Color.White).onChange((value: string) => {this.text = valueif (value.length==0) {this.isSearch=false}})Text("搜索").border({width:1,radius:10,color:Color.White}).fontSize(14).fontColor("#ffffff").padding({left:13,right:13,top:5,bottom:5}).borderRadius(10).onClick(async ()=>{if (this.text.trim()==''&&this.text.length==0) {this.isSearch=falseshowToast("搜索内容不能为空")}else {this.isSearch=true}})}.justifyContent(FlexAlign.SpaceBetween).width('100%').padding({top:10,bottom:10,left:15,right:15}).expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP]).backgroundColor("#ff0000")

从云数据库查询出对应的数据

 async aboutToAppear(): Promise<void> {const history = await StorageUtils.getAll("history_list")if (history!=''&&history!=undefined) {this.searchHistoryList=JSON.parse(history)}let condition = new cloudDatabase.DatabaseQuery(search_hot_txt);let listData = await databaseZone.query(condition);let json = JSON.stringify(listData)let data1:SearchHotTxt[]= JSON.parse(json)this.searchTxt=data1this.flag=true}

展示搜索列表

 Text("热门搜索").width('100%').fontSize(16).fontColor("#000000").fontWeight(FontWeight.Bold).padding({left:15,top:15}) Flex({wrap:FlexWrap.Wrap}){ForEach(this.searchTxt,(item:SearchHotTxt,index:number)=>{Text(item.txt).backgroundColor("#ffe7e5e5").fontColor("#000000").fontWeight(FontWeight.Bold).fontSize(16).padding(10).margin({top:10,left:10}).borderRadius(5).onClick(()=>{this.text=item.txt})})}

我们执行一下代码看看效果