HarmonyOS TextInput密码类型

在TextInput设置InputType.Password密码类型下，是否有api能让开发者控制密码是否可见，不是PasswordIcon这种形式，passwordIcon目前只能设置图标，不支持设置大小

HarmonyOS

Excelsior_abit

2024-12-18 15:24:20

浏览

回答 1

待解决

回答 1

按赞同

按时间

zbw_apple

可以自定义设置控制密码是否可见的图标，参考如下demo：

@Entry
@Component
struct TextInputExample {
  @State text: string = ''
  @State password: string = '';
  @State positionInfo: CaretOffset = { index: 0, x: 0, y: 0 }
  controller: TextInputController = new TextInputController()
  @State isShowPassword:boolean = false;

  build() {
    Column() {
      TextInput({ text: this.text, placeholder: 'input your word...', controller: this.controller })
        .placeholderColor(Color.Grey)
        .placeholderFont({ size: 14, weight: 400 })
        .caretColor(Color.Blue)
        .width('95%')
        .height(40)
        .margin(20)
        .fontSize(14)
        .fontColor(Color.Black)
        .inputFilter('[a-z]', (e) => {
          console.log(JSON.stringify(e))
        })
        .onChange((value: string) => {
          this.text = value
        })
      // 密码输入框
      Row(){
        // if(this.isClick === true){
        TextInput({text: $$this.password, placeholder: 'input your password...' })
          .width('95%')
          .height(40)
          .margin(8)
          .type(this.isShowPassword ? InputType.Normal : InputType.Password)
          .maxLength(9)
          .showPasswordIcon(false)
        Image(this.isShowPassword ? $r('app.media.ic_personal_normal'): $r('app.media.ic_personal_focus'))
          .width('25vp')
          .height('25vp')
          .margin({right:'80vp',bottom:'50%'})
          .position({x:'85%',y:15})
          .onClick(()=>{
            this.isShowPassword = !this.isShowPassword
          })
      }
      .width('100%')

    }.width('100%')
  }
}

两种不同的passwordicon对应的需要不同的键盘模式，但是不同的键盘之间进行切换肯定会存在差异，没办法改善