## 技术栈
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
let fieldTypeMap = new Map
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
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
})
})
}
```