HarmonyOS7 密码可见性输入框：用 InputType.Password 把安全输入做得更顺手-北京尧图网络

文章目录前言使用场景先讲清楚代码阅读顺序重点实现细节完整代码容易踩坑的地方收个尾前言这篇继续聊 HarmonyOS7 里的密码显示切换。如果你刚开始学 ArkUI不建议一上来就背属性名那样很容易看完就忘。更好的方式是先搞清楚这个页面想解决什么问题用户做了什么操作代码又是怎么把这个操作反映到界面上的。这个案例的核心是InputType.Password它对应的使用场景是安全输入。我会把它当成一个真实业务里的小模块来拆而不是只贴一段代码结束。读完之后你至少应该能知道这几件事问题答案学什么InputType.Password在安全输入场景里的用法看哪里状态字段、核心组件、事件回调重点状态交互适合谁刚接触 HarmonyOS7 声明式 UI 的同学使用场景先讲清楚先把页面目标说清楚。这个案例不是为了炫技而是展示一个常见交互片段页面上有内容展示有样式区分也有用户操作后的反馈。小白读这类代码时最容易犯的错误是从第一行样式属性开始抠细节结果看了半天不知道页面到底在干什么。我更建议按这个顺序看找到State确认页面有哪些会变化的数据。找到核心组件比如InputType.Password看看它接收了哪些参数。找到onChange、onClick或类似回调理解用户操作之后状态怎么变。最后再看颜色、圆角、间距这些样式属性。这样读下来哪怕代码比较长也不会迷路。代码阅读顺序ArkUI 的声明式 UI 有个特点界面是状态的结果。你不用手动去找某个控件再改它的文本而是改状态框架会根据状态重新刷新相关 UI。在这个案例里布局一般由Column、Row、Scroll、Grid这些容器搭起来。它们负责“东西放在哪里”InputType.Password负责“这个功能怎么表现”事件回调负责“用户操作后发生什么”。三者配合起来页面才是完整的。下面这段关键代码可以先看一遍它保留了入口组件和核心逻辑EntryComponentstruct PasswordVisibilityField{StateisShow:booleantrueStatepassword:stringStateshowPassword:booleanfalsebuild(){Column(){if(this.isShow){Column({space:16}){Text(密码输入框).fontSize(14).fontColor(THEME_COLOR).fontWeight(600)Row(){TextInput({placeholder:请输入密码,text:this.password}).type(this.showPassword?InputType.Normal:InputType.Password).width(80%).height(44).backgroundColor(#F8F8F8).borderRadius(8).padding({left:12,right:12}).onChange((value:string){this.passwordvalue})重点实现细节把上面的代码拆开看会更容易理解State是页面的记忆点输入、点击、选择这类变化都会先落到这里。onChange负责接住用户输入或选择变化再把新值写回状态。onClick是按钮类交互的入口适合触发切换、清空、提交这类动作。ForEach说明页面不是硬编码一项项写死而是用数组批量渲染。输入类组件要同时关注初始值、变化监听和错误提示少一个都会影响体验。这里有一个很实用的判断方法如果你删掉某个状态字段页面还是否能表达当前交互如果不能说明这个状态就是业务状态如果删掉只是少了颜色或间距那它更多是视觉层面的东西。对新手来说先区分“业务状态”和“样式配置”很重要。很多页面写乱都是因为把这两类东西混在一起了。完整代码下面是完整代码。文章里的组件名已经换成更贴近业务的英文命名可以直接复制到独立页面里阅读。建议你先跑原样再尝试改一个状态字段或一个样式属性看界面怎么变化。constPAGE_BG_COLOR:string#F5F6FAconstCARD_BG_COLOR:string#FFFFFFconstTHEME_COLOR:string#4D96FFconstSUBTEXT_COLOR:string#8A8A8AEntryComponentstruct PasswordVisibilityField{StateisShow:booleantrueStatepassword:stringStateshowPassword:booleanfalsebuild(){Column(){if(this.isShow){Column({space:16}){Text(密码输入框).fontSize(14).fontColor(THEME_COLOR).fontWeight(600)Row(){TextInput({placeholder:请输入密码,text:this.password}).type(this.showPassword?InputType.Normal:InputType.Password).width(80%).height(44).backgroundColor(#F8F8F8).borderRadius(8).padding({left:12,right:12}).onChange((value:string){this.passwordvalue})Text(this.showPassword?隐藏:显示).fontSize(14).fontColor(THEME_COLOR).onClick((){this.showPassword!this.showPassword}).padding({left:8})}.width(100%).justifyContent(FlexAlign.SpaceBetween).alignItems(VerticalAlign.Center)Text(密码长度:${this.password.length}位).fontSize(13).fontColor(SUBTEXT_COLOR)Row({space:0}){ForEach([1,2,3,4,5,6],(item:number){Text(●).fontSize(18).fontColor(itemthis.password.length?#FFD93D:#E0E0E0).padding(4)})}.width(100%).justifyContent(FlexAlign.Center)}.width(100%).padding(16).backgroundColor(CARD_BG_COLOR).borderRadius(12)}Text(密码可见性输入框TextInput 密码输入显示/隐藏切换).fontSize(12).fontColor(SUBTEXT_COLOR).margin({top:12})}.width(100%).height(100%).backgroundColor(PAGE_BG_COLOR).padding(16)}}容易踩坑的地方如果把这个案例放进真实项目我会额外注意这些点命名要清楚状态字段最好能直接看出用途不要都叫value或flag。边界要处理空内容、超长内容、禁用状态、加载状态都要提前考虑。样式要克制颜色和阴影不是越多越好能表达层级就够了。交互要有反馈用户点了、输入了、选择了页面要给出明确变化。这些不是语法问题但会直接影响页面质量。收个尾这个案例可以继续往两个方向练。一个方向是改数据把静态内容换成数组或接口返回另一个方向是改交互比如增加清空、重置、禁用、加载中等状态。学 HarmonyOS7 组件时不要只满足于“代码能跑”。能说清楚为什么这么写才算真正理解了这个案例。

HarmonyOS7 密码可见性输入框：用 InputType.Password 把安全输入做得更顺手

相关推荐

【HarmonyOS】鸿蒙应用子模块module资源如何获取

大模型微调实战：从LoRA到QLoRA的完整流程与避坑指南

收藏必备！小白程序员也能快速上手学习大模型，打造智能病历生成神器

更多资讯

工地太忙根本没时间复习考试正反转低压电工证在哪考最靠谱

特种电梯工调研报告：多久拿证能顺利上岗？

电工证用多大照片多久拿证？过期证书别慌，手把手教你复审流程

电工证复审记录标签值不值得考？学历不高怕报不上名的你必须知道

焦作电工证页面怎么转异地？多少钱？找工作别再被卡证

考电工证预计需要多少天怎么报名流程全解析

今日更新

电工证考试及格线你知道多少？值不值得考

南通电工证发证单位考前押题怎么搞？工地太忙根本没时间复习考试

黄陵县高低压电工证怎么考？上岗必备全流程避坑指南

本周精选

安监局电工证分数查询怎么查才能知道含金量高不高

新疆电工作业干活累吗良心建议助你避开考不过的坑

中牟县电工证怎么报名外省证能转吗

本月热门

面向复杂光照与角度的宠物面部识别鲁棒性增强策略

基于DRV8818与STM32的双极步进电机驱动方案实战解析

DRV8818PWPR+PIC18F45K80双极步进电机控制方案实战

读完文章，想聊聊您的网站？