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

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

HarmonyOS
2024-09-25 12:06:07
817浏览
收藏 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%')  
  }  
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
分享
微博
QQ
微信
回复
2024-09-25 16:50:06


相关问题
HarmonyOS 键盘InputType支持问题
615浏览 • 1回复 待解决
HarmonyOS TextInput 组件问题
1229浏览 • 1回复 待解决
HarmonyOS TextInput组件错误样式问题
1289浏览 • 1回复 待解决
Image怎么替换svg图片
8959浏览 • 1回复 待解决
HarmonyOS TextInput问题
408浏览 • 1回复 待解决
HarmonyOS字符串替换问题
1679浏览 • 1回复 待解决
HarmonyOS 替换字符串问题
1043浏览 • 1回复 待解决
HarmonyOS TextInput 换行问题
1341浏览 • 1回复 待解决
HarmonyOS TextInput焦点问题
1058浏览 • 1回复 待解决
HarmonyOS $r 字符串替换问题
1671浏览 • 1回复 待解决
HarmonyOS ets替换ts编译报错问题
978浏览 • 1回复 待解决