HarmonyOS TextInput组件InputType.Password模式右侧眼睛图片替换问题

TextInput组件InputType.Password模式右侧眼睛图片替换,没有找到设置自定义图片的大小以及布局的api。

HarmonyOS
2024-09-25 12:06:07
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zbw_apple

输入框控件里输入密码模式的自定义小眼睛图片宽高不支持自主设置

可使用TextInput的showPasswordIcon属性隐藏图标,使用Image组件替代控制TextInput组件的type。

可以参考:

@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  
        })  
      Text(this.text)  
      Button('Set caretPosition 1')  
        .margin(15)  
        .onClick(() => {  
          // 将光标移动至第一个字符后  
          this.controller.caretPosition(1)  
        })  
      Button('Get CaretOffset')  
        .margin(15)  
        .onClick(() => {  
          this.positionInfo = this.controller.getCaretOffset()  
        })  
      // 密码输入框  
      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_display_and_brightness'): $r('app.media.ic_privacy'))  
          .width('25vp')  
          .height('25vp')  
          .margin({right:'80vp',bottom:'50%'})  
          .position({x:'85%',y:15})  
          .onClick(()=>{  
            this.isShowPassword = !this.isShowPassword  
          })  
      }  
      .width('100%')  
    }.width('100%')  
  }  
}
分享
微博
QQ
微信
回复
2024-09-25 16:50:06
相关问题
HarmonyOS TextInput 组件问题
353浏览 • 1回复 待解决
HarmonyOS TextInput组件错误样式问题
397浏览 • 1回复 待解决
Image怎么替换svg图片
8248浏览 • 1回复 待解决
HarmonyOS TextInput 换行问题
489浏览 • 1回复 待解决
HarmonyOS TextInput焦点问题
303浏览 • 1回复 待解决
HarmonyOS字符串替换问题
576浏览 • 1回复 待解决
HarmonyOS $r 字符串替换问题
640浏览 • 1回复 待解决
HarmonyOS TextInput调用系统键盘问题
178浏览 • 1回复 待解决
HarmonyOS TextInput和键盘相关问题咨询
432浏览 • 1回复 待解决
HarmonyOS TextInput自定义键盘问题
422浏览 • 1回复 待解决
HarmonyOS image 替换颜色
216浏览 • 1回复 待解决
HarmonyOS 组件切换深色模式不生效
297浏览 • 1回复 待解决