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

鸿蒙小林

发布于 2025-6-20 14:47

2643浏览

0收藏

技术栈

Appgallery connect

开发准备

随着开发功能的逐渐深入，我们的应用逐渐趋于完善，现在我们需要继续在首页给没有使用按钮以及组件添加对应的功能，这一节我们要实现的功能是商品搜索页面，这个页面我们从上到下开始实现功能，首先就是一个搜索的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"]}
  ]
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

对应的实体类


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 };
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.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.

对应的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 };
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

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

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

实现布局

 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")
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.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.

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

 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
  }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

展示搜索列表

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

            })
          }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.