HarmonyOS NEXT TextInput密码类型?

Question

HarmonyOS NEXT TextInput密码类型?

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

可以自定义设置控制密码是否可见的图标，参考如下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对应的需要不同的键盘模式，但是不同的键盘之间进行切换肯定会存在差异，没办法改善