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 键盘InputType支持问题
218浏览 • 1回复 待解决
HarmonyOS TextInput 组件问题
576浏览 • 1回复 待解决
HarmonyOS TextInput组件错误样式问题
706浏览 • 1回复 待解决
Image怎么替换svg图片
8484浏览 • 1回复 待解决
HarmonyOS字符串替换问题
1035浏览 • 1回复 待解决
HarmonyOS TextInput问题
88浏览 • 1回复 待解决
HarmonyOS InputType失去焦点禁止交互
114浏览 • 1回复 待解决
HarmonyOS $r 字符串替换问题
1106浏览 • 1回复 待解决
HarmonyOS 替换字符串问题
258浏览 • 1回复 待解决
HarmonyOS TextInput焦点问题
545浏览 • 1回复 待解决
HarmonyOS TextInput 换行问题
840浏览 • 1回复 待解决
HarmonyOS ets替换ts编译报错问题
253浏览 • 1回复 待解决
HarmonyOS TextInput clearButton 位置问题
180浏览 • 1回复 待解决
HarmonyOS TextInput组件的使用
96浏览 • 1回复 待解决
HarmonyOS textinput键盘弹出问题
273浏览 • 1回复 待解决
HarmonyOS TextInput自动获取焦点问题
202浏览 • 1回复 待解决