HarmonyOS 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
2025-01-09 15:57:08
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zbw_apple

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

使用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
          }
        })
    }
  }
}
分享
微博
QQ
微信
回复
2025-01-09 17:43:54
相关问题
TextInput组件输入状态下隐藏光标
1878浏览 • 1回复 待解决
TextInput 怎么设置不可编辑?
2688浏览 • 1回复 待解决
TextInput怎么输入中文
3459浏览 • 0回复 待解决
HarmonyOS APP在设置图标如何设置
147浏览 • 1回复 待解决
HarmonyOS 如何设置拍照不存图库?
340浏览 • 1回复 待解决