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

## 技术栈

Appgallery connect

## 开发准备

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

## 功能分析

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

## 代码实现

首先我们先创建对应的表

```c

{

"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"]}

]

}

```

对应的实体类

```c

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类

```c

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

```c

//先创建好对应的变量

@State text: string = ''

controller: TextInputController = new TextInputController()

@State searchTxt:SearchHotTxt[]=[]

@State flag:boolean=false

@State isSearch:boolean=false

@State columns: number = 2

```

实现布局

```c

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 = value

if (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=false

showToast("搜索内容不能为空")

}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")

```

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

```c

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=data1

this.flag=true

}

```

展示搜索列表

```c

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

})

})

}

```