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

@Extend(TextInput) function clearBtnMode(){
.cancelButton({
style: CancelButtonStyle.INPUT,
icon: {
size: ‘20vp’,
src: $r(‘app.media.btn_input_clear1’)
}
})
}

CancelButtonStyle.INPUT这个模式下，输入时显示了设置的图标按钮，但是输入完毕后没有隐藏该图标按钮。
有什么办法可以实现吗

更多关于HarmonyOS 鸿蒙Next TextInput的cancelButton属性设置style: CancelButtonStyle.INPUT后，输入完毕后怎么设置图标隐藏的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

zlyuanteng 1楼•4 天前

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

使用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
          }
        })
    }
  }
}

nodeper 2楼•4 天前

在HarmonyOS 鸿蒙系统中，针对TextInput组件的cancelButton属性，当设置为CancelButtonStyle.INPUT后，该按钮通常会在用户输入时显示，以便于用户取消输入。若希望在输入完毕后隐藏该图标，可以通过编程方式动态控制其可见性。

具体操作步骤如下：

获取TextInput组件引用：首先，在代码中通过ID获取到TextInput组件的引用。
监听输入完成事件：为TextInput组件添加输入完成事件监听器（如onTextChange或特定的事件监听，根据具体API文档确定）。
动态设置cancelButton可见性：在输入完成事件的回调中，通过调用TextInput组件的API（假设有setCancelButtonVisible或类似方法，具体方法名需参考API文档），将cancelButton设置为不可见。

示例代码（伪代码，具体实现需参考实际API）：

textInput.onTextChange(event => {
    if (event.isCompleted) {
        textInput.setCancelButtonVisible(false);
    }
});

注意，实际开发中需确认是否存在直接控制cancelButton可见性的API，若无，则需通过UI布局调整或其他方式间接实现。

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html