HarmonyOS TextInput的cancelButton属性设置style: CancelButtonStyle.INPUT后，输入完毕后怎么设置图标隐藏

可以尝试使用三元运算符进行判断，更改图标的显示模式。

使用onEditChange判断当前是否为输入状态，有光标时为编辑态，无光标时为非编辑态。isEditing为true表示正在输入。参考文档：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-textinput-V5#oneditchange8

当前为输入状态时，设置清除按钮的样式为 CancelButtonStyle.INPUT ，当前为非编辑态时，设置清除按钮的样式为 CancelButtonStyle.INVISIBLE。

测试demo如下：

// xxx.ets
@Entry
@Component
struct ClearNodeExample {
  @State text: string = ''
  @State isOK: boolean = false
  controller: TextInputController = new TextInputController()

  build() {
    Column() {
      TextInput({ placeholder: 'input ...', controller: this.controller })
        .width(380)
        .height(60)
        .cancelButton({
          style: (this.isOK ? CancelButtonStyle.INPUT : CancelButtonStyle.INVISIBLE),
          icon: {
            size: 45,
            src: $r('app.media.startIcon'),
            color: Color.Blue
          }
        })
        .onEditChange((isEditing: boolean) => {
          this.isOK = isEditing
        })
        .onChange((value: string) => {
          this.text = value
        })
      TextInput({ placeholder: 'input ...', controller: this.controller })
        .width(380)
        .height(60)
        .cancelButton({
          icon: {
            size: 45,
            src: $r('app.media.startIcon'),
            color: Color.Blue
          }
        })
    }
  }
}
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.