鸿蒙开发TextInput密码框修改图标
·
在开发登录页面时发现 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的属性
})
更多推荐



所有评论(0)