Search

效果

子组件

无

参数

value

• 类型：string
• 默认值：''

placeholder

• 类型：string
• 默认值：'' 提示语

controller

controller: TextInputController = new TextInputController();

控制器

属性

searchButton

按钮

• value: 搜索框末尾搜索搜索按钮文本内容

• option:配置搜索框文本样式,例如

{

fontSize: '16fp',

fontColor: '#ff3f97e9'

}

searchIcon

设置左侧图标样式

{

size: '16vp',

color: '#99000000',

src: $r('sys.media.ohos_ic_public_search_filled')

}

cancelButton

设置右侧清除按钮样式。

• CancelButtonStyle.CONSTANT 一直显示

• CancelButtonStyle.INPUT 输入框有内容时显示

.cancelButton({
  style: CancelButtonStyle.CONSTANT,
  icon: {
    src: $r('sys.media.ohos_ic_public_cancel_filled')
  }
})

type 类型

• SearchType.Password 密码类型

• SearchType.Email 邮箱地址类型

• SearchType.Number 数字类型

• SearchType.PhoneNumber 电话号码类型

• SearchType.URL 带 URL 的输入模式

事件

• onChange 事件

.onChange((value:string)=>{
     this.message = value
     console.info(this.message)
})

• onSubmit 事件

.onSubmit((enterKey: EnterKeyType) => {
    console.log("trigger area onsubmit" + enterKey);
  })

示例

// xxx.ets
@Entry
@Component
struct SearchExample {
  @State changeValue: string = '';
  @State submitValue: string = '';


  build() {
    Column() {
      Text('onSubmit:' + this.submitValue).fontSize(18).margin(15)
      Search({ value: this.changeValue, placeholder: 'Type to search...' })
        .searchButton('搜索',{fontSize:'18fp',fontColor:Color.Red})
        .searchIcon({
          src: $r('sys.media.ohos_ic_public_search_filled')
        })
        .cancelButton({
          style: CancelButtonStyle.INPUT,
          icon: {
            src: $r('sys.media.ohos_ic_public_cancel_filled')
          }
        })
        .type(SearchType.NUMBER)
        .width('90%')
        .height(40)
        .maxLength(20)
        .backgroundColor('#F5F5F5')
        .placeholderColor(Color.Grey)
        .placeholderFont({ size: 14, weight: 400 })
        .textFont({ size: 14, weight: 400 })
        .onSubmit((value: string) => {
          this.submitValue = value;
        })
        .onChange((value: string) => {
          this.changeValue = value;
        })
        .margin(20)
    }.width('100%')
  }
}