HarmonyOS鸿蒙Next中TextInput怎么重写清除按钮cancelButton的事件

推荐使用隐藏系统按钮，然后自定义清除按钮。

• 隐藏 TextInput 的系统清除按钮（不设置cancelButton，或设置为InputCancelButton.NONE）；
• 利用Stack布局，将 TextInput 和自定义清除按钮（Button/Image）组合，实现视觉上的 “输入框右侧清除按钮”；
• 给自定义清除按钮绑定onClick回调，直接执行自定义事件，完全可控（支持自定义样式、动画、逻辑）。

import promptAction from '@ohos.promptAction';

@Entry
@Component
struct Index {
  // 输入框绑定值（显式string类型）
  @State inputContent: string = '';

  build() {
    Column({ space: 30 }) {
      Text("TextInput 清除按钮自定义事件（进阶方案）")
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
        .textAlign(TextAlign.Center)

      // 核心：Stack布局组合 TextInput + 自定义清除按钮
      Stack({ alignContent: Alignment.End }) {
        // 1. TextInput：隐藏系统清除按钮
        TextInput({
          text: this.inputContent,
          placeholder: "输入内容后可点击右侧自定义清除按钮"
        })
          .width('85%')
          .height(50)
          .padding({ left: 15, right: 40 }) // 右侧预留自定义按钮空间
          .border({ width: 1, color: '#E5E5E5', radius: 8 })
          .fontSize(16)
          // 隐藏系统清除按钮（默认不设置cancelButton）
          // 正常监听输入变化（仅更新文本，无额外判断）
          .onChange((newValue: string) => {
            this.inputContent = newValue;
          })

        // 2. 自定义清除按钮（仅当输入框有文本时显示，更友好）
        if (this.inputContent.length > 0) {
          Button({
            type: ButtonType.Circle,
            stateEffect: true
          }) {
            Text("×")
              .fontSize(18)
              .fontColor(Color.Gray)
          }
          .width(30)
          .height(30)
          .backgroundColor(Color.Gray)
          .margin({ right: 10 }) // 与输入框右侧保持间距
          .onClick(() => {
            console.log("点击自定义清除按钮");
            // 步骤1：清空输入框文本（模拟系统清除按钮功能）
            this.inputContent = '';
            // 步骤2：执行自定义事件（核心需求，完全可控）
            this.customCancelEvent();
          })
        }
      }

      Text(`当前输入内容：${this.inputContent || '暂无输入'}`)
        .fontSize(16)
        .fontColor(Color.Gray)
        .textAlign(TextAlign.Center)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }

  /**
   * 自定义清除事件（完全可控，支持复杂业务逻辑）
   */
  private customCancelEvent(): void {
    console.log("执行自定义清除事件（进阶方案）");
    // 示例业务逻辑：可添加接口请求、状态重置、动画效果等
    promptAction.showToast({
      message: "自定义清除按钮点击成功，逻辑执行中...",
      duration: 2000
    });

    // 复杂业务示例：重置页面其他状态
    // this.resetFilterCondition();
    // this.clearSearchHistory();
  }
}