鸿蒙-TextInput清除按钮实现

DevEco Studio 版本：DevEco Studio NEXT Developer Preview2
HarmonyOS API 版本：4.1.0(11)

TextInput 清除按钮实现

自定义 TextInput，TextArea 组件，实现一键清空已输入内容的按钮。

具体代码如下：

@State input: string = '';
@Builder
SearchLayout() {
  Row() {
    TextInput({placeholder: 'inupt your text...',})
      .onChange((value) => {
        this.input = value
      })
      .layoutWeight(1)
    ImageView({
      option: {
        loadSrc: $r("app.media.clear"),
        width: 16,
        height: 16,
      }
    })
      .visibility(this.input == '' ? Visibility.None : Visibility.Visible)
      .onClick(() => {
        this.input = ''
      })
  }
}

参考

https://ost.51cto.com/answer/8395