HarmonyOS NEXT鸿蒙开发ArkUI：Search搜索框组件-马育民老师

# 介绍

搜索框组件，适用于浏览器的搜索内容输入框等应用场景。

[![](https://www.malaoshi.top/upload/0/0/1GW2GYmOZmbs.png)](https://www.malaoshi.top/upload/0/0/1GW2GYmOZmbs.png)

# 接口

```
Search(options?: { value?: string, placeholder?: ResourceStr, icon?: string, controller?: SearchController })
```

**常用参数：**

- value：string类型，设置当前显示的搜索文本内容，支持$$双向绑定变量。

- placeholder：ResourceStr类型，设置无输入时的提示文本

# 属性

### searchButton

设置搜索框末尾搜索按钮。

```
searchButton(value: string, option?: SearchButtonOptions)
```

**常用参数：**

- value：string类型，必填，搜索框末尾搜索按钮文本内容。

- option：SearchButtonOptions类型，配置搜索框文本样式。默认值：
```
{
	fontSize: '16fp',
	fontColor: '#ff3f97e9'
}
```

# 事件

### onSubmit

点击搜索图标、搜索按钮或者按下软键盘搜索按钮时触发该回调。

```
onSubmit(callback: (value: string) => void)
```

**参数：**

- value：`string` 类型，搜索输入框的内容

# 例子

```
@Entry
@Component
struct Index {
  // 定义 Search 组件的搜索内容
  @State searchContent:string = "iphone17"

build() {
    // 列示布局
    Column(){

Search({
        value:this.searchContent,
        placeholder:"请输入内容"
      })
        .searchButton("搜索")
        .onSubmit( value=>{
          console.log("搜索内容：",value)
        })
        .margin({
          left:10,
          right:10,
          bottom:10,
        })
    }

}
}
```

原文出处：http://www.malaoshi.top/show_1GW2GZfSH8c5.html