定制炫酷 Search 的思路与代码原创

因为活着就一定行

发布于 2024-11-28 10:54

浏览

0收藏

嘿，兄弟们，今天咱们来聊聊HarmonyOS里的一个酷炫组件——Search。这个小家伙可不简单，它就像是你手机上的搜索框，能帮你快速找到想要的东西。但别急，咱们慢慢来，先搞清楚它和普通的TextInput有啥不同，然后再看看它都能干些啥，最后咱们再聊聊怎么自己动手做个定制版的Search组件。

Search vs TextInput

首先，Search和TextInput都是输入框，但Search更像是专门为搜索而生的。它不仅支持基本的文本输入，还有搜索图标、搜索按钮这些额外的功能，让你的搜索操作更加直接和便捷。而TextInput呢，更像是个老实巴交的文本框，只能老老实实地输入文本。

Search的用武之地

Search组件的用处可大了去了，它能让你的应用看起来更专业，用户体验也更好。比如在浏览器里搜索内容，或者在应用里快速查找信息，Search都是个不错的选择。

优化场景

浏览器搜索：直接在地址栏输入搜索词，一键搜索。
应用内搜索：在应用内部快速查找特定内容。

常见场景

电商应用：搜索商品。
音乐应用：搜索歌曲或歌手。
社交媒体：搜索用户或帖子。

未来拓展

智能家居控制：通过语音搜索控制家中设备。
车载系统：搜索导航目的地。

自定义Search组件

根据这些文件，咱们完全可以自己做个Search组件。下面就是怎么做的步骤和代码。

代码示例

首先，咱们来看看基本的Search组件怎么写：

// 创建Search组件
@Entry
@Component
struct SearchExample {
  controller: SearchController = new SearchController();

  build() {
    Column() {
      Search(controller: this.controller)
        .width("95%")
        .height(40)
        .backgroundColor("#F5F5F5")
        .placeholderColor(Color.Grey)
        .placeholderFont({ size: 14, weight: 400 })
        .textFont({ size: 14, weight: 400 })
        .searchButton("SEARCH")
    }
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

这段代码创建了一个基本的Search组件，包括搜索框、搜索按钮等。

接下来，咱们加点料，比如自定义键盘：

// 自定义键盘组件
@Builder CustomKeyboardBuilder() {
  Column() {
    Button("X").onClick(() => {
      this.controller.stopEditing();
    })
    Grid() {
      ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9], (item: number) => (
        GridItem {
          Button(item.toString())
            .width(100)
            .onClick(() => {
              this.inputValue += item.toString();
            })
            .maxCount(3)
            .columnsGap(10)
            .rowsGap(10)
            .padding(5)
            .backgroundColor(Color.Gray)
        }
      )
    }
  }
}

// 使用自定义键盘的Search组件
@Entry
@Component
struct SearchExampleWithCustomKeyboard {
  controller: SearchController = new SearchController();
  inputValue: string = "";

  build() {
    Column() {
      Search(controller: this.controller, value: this.inputValue)
        .customKeyboard(this.CustomKeyboardBuilder())
    }
  }
}
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.

这段代码展示了如何给Search组件绑定一个自定义键盘，让你的搜索体验更加个性化。

汇总代码

// 基本Search组件
@Entry
@Component
struct BasicSearchExample {
  controller: SearchController = new SearchController();

  build() {
    Column() {
      Search({ controller: this.controller })
        .width("95%")
        .height(40)
        .backgroundColor("#F5F5F5")
        .placeholderColor(Color.Grey)
        .placeholderFont({ size: 14, weight: 400 })
        .textFont({ size: 14, weight: 400 })
        .searchButton("SEARCH")
    }
  }
}

// 使用自定义键盘的Search组件
@Entry
@Component
struct SearchExampleWithCustomKeyboard {
  controller: SearchController = new SearchController();
  @State inputValue: string = "";

  build() {
    Column() {
      Search({ controller: this.controller, value: this.inputValue })
        .customKeyboard(this.CustomKeyboardBuilder())
    }
  }

  // 自定义键盘组件
  @Builder
  CustomKeyboardBuilder() {
    Column({ space: 10 }) {
     Row(){
       Blank()
       Text("X")
         .onClick(() => {
           this.controller.stopEditing();
         })
         .padding(5)
         .borderWidth(0.1)
         .borderRadius(40)
     }
     .width('100%')
      .padding({right:10,top:10})
      Grid() {
        ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9], (item: number) => (
        GridItem() {
          Button(item.toString())
            .width(100)
            .onClick(() => {
              this.inputValue += item.toString();
            })
            .padding(5)
            .width('60')
            .backgroundColor(Color.Gray)
        }

        )
        )
      }
      .maxCount(3)
      .columnsGap(10)
      .rowsGap(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.
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.
69.
70.
71.
72.