在开发登录页面时发现 InputType.Password 自带的图标不符合需求,所以要改图标。

现在找到修改TextInput密码显隐图标的两种方式

第一种就是通过它passwordIcon直接添加显隐状态图片,不过 passwordIcon 好像不能直接修改图片的大小

.passwordIcon({onIconSrc: $r('app.media.icon_eyesopen'), offIconSrc: $r('app.media.icon_no')})  

 第二种就是通过点击图片修改 TextInput 的type属性,实现密码显隐,这个可以修改图标的大小

 @State isPasswordHidden: boolean = true // 定义变量

TextInput({ placeholder:   '请输入密码' })
            .fontSize(16)
            .padding({ left: 10 })
            .backgroundColor(Color.Transparent)
            .placeholderColor('#999')
            .type( this.isPasswordHidden ? InputType.Password : InputType.Normal)  // Password 密码框,  Normal 正常框
            .showPasswordIcon(false) // 隐藏密码框自带的图标
            .onChange((value: string) => {
             
            })

Image(this.isPasswordHidden ? $r('app.media.icon_eyesopen') : $r('app.media.icon_no'))
              .width(30)
              .height(30)
              .position({ right: 10})
              .onClick(()=>{
                this.isPasswordHidden = !this.isPasswordHidden // 点击切换TextInput的属性
              })

Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐