HarmonyOS7 登录页面设计：从视觉到交互的完整实现

文章目录前言应用场景方案设计编码实现标题区输入框区域记住登录 忘记密码登录按钮注册入口踩坑总结密码框的自动填充键盘遮挡问题按钮文字的空格完整代码参考写在最后前言登录页面是用户打开 App 后看到的第一个交互界面它的设计质量直接影响用户对产品的第一印象。一个好的登录页需要做到视觉清晰、操作简单、反馈即时。今天用 ArkUI 从零搭建一个登录页面包含用户名输入、密码输入、记住登录、忘记密码、登录按钮、注册入口这些标准元素。应用场景这个登录页面适用于需要用户身份认证的应用场景企业内部系统社交 App电商平台的用户登录SaaS 工具的账号登录方案设计页面布局从上到下分为四个区域标题区— “欢迎登录” 副标题输入区— 用户名 密码两个输入框选项区— 记住登录 忘记密码操作区— 登录按钮 注册入口整体用一个卡片容器包裹圆角 阴影营造浮起感。编码实现标题区Column(){Text(欢迎登录).fontSize(24).fontWeight(FontWeight.Bold).fontColor(#333333).margin({bottom:4})Text(请输入您的账号和密码).fontSize(14).fontColor(#999999).margin({bottom:32})}.width(100%)标题用大字号24px加粗副标题用灰色小字号。底部留 32vp 的间距跟输入区域分隔开。输入框区域Column(){TextInput({placeholder:请输入用户名/邮箱}).width(100%).height(48).backgroundColor(#F8F8F8).borderRadius(10).padding({left:16}).onChange((value:string){this.usernamevalue}).margin({bottom:16})TextInput({placeholder:请输入密码}).width(100%).height(48).backgroundColor(#F8F8F8).borderRadius(10).padding({left:16}).type(InputType.Password).onChange((value:string){this.passwordvalue})}.width(100%).margin({bottom:16})输入框的设计要点灰色背景—#F8F8F8让输入框跟白色卡片有视觉层次圆角 10vp— 现代感的圆角设计高度 48vp— 适合手指触控的操作区域密码框用InputType.Password— 自动密文显示记住登录 忘记密码Row(){Toggle({type:ToggleType.Checkbox,isOn:false}).width(20).height(20).selectedColor(#4D96FF).onChange((value:boolean){this.rememberMevalue})Text( 记住登录).fontSize(13).fontColor(#999999)Text().layoutWeight(1)Text(忘记密码).fontSize(13).fontColor(#4D96FF)}.width(100%).margin({bottom:24})这一行用了ToggleType.Checkbox复选框样式比 Switch 开关更适合这种勾选场景。左侧是记住登录右侧是忘记密码中间用Blank()撑开。登录按钮Button(登 录).width(100%).height(48).backgroundColor(#4D96FF).borderRadius(24).fontColor(#FFFFFF).fontSize(16).onClick((){if(this.usernamethis.password){AlertDialog.show({title:登录成功,message:欢迎回来${this.username},confirm:{value:确定,action:(){}}})}else{AlertDialog.show({title:提示,message:请输入用户名和密码,confirm:{value:确定,action:(){}}})}}).margin({bottom:20})登录按钮用了全宽胶囊形borderRadius(24)点击时做简单的非空校验。按钮文字中间加了空格让登录两个字不挤在一起。注册入口Row(){Text(还没有账号).fontSize(13).fontColor(#999999)Text(立即注册).fontSize(13).fontColor(#4D96FF).fontWeight(FontWeight.Bold)}底部用两行文字组成注册入口立即注册用主题色加粗暗示可点击。踩坑总结密码框的自动填充HarmonyOS 系统可能会弹出密码自动填充建议这在开发阶段可能干扰测试。可以在TextInput上加.copyOption(false)禁用复制来减少干扰。键盘遮挡问题当键盘弹出时登录按钮可能被遮挡。解决方案用Scroll包裹整个表单设置.expandSafeArea([SafeAreaType.KEYBOARD])让页面自动适应键盘按钮文字的空格登 录中间加了两个空格这是一种视觉设计手法。如果觉得两个字太挤可以用空格拉开间距也可以用.letterSpacing()属性。完整代码参考EntryComponentstruct LoginPage{Stateusername:stringStatepassword:stringStaterememberMe:booleanfalsebuild(){Column(){Column(){// 标题Column(){Text(欢迎登录).fontSize(24).fontWeight(FontWeight.Bold).fontColor(#333333).margin({bottom:4})Text(请输入您的账号和密码).fontSize(14).fontColor(#999999).margin({bottom:32})}.width(100%)// 输入框Column(){TextInput({placeholder:请输入用户名/邮箱}).width(100%).height(48).backgroundColor(#F8F8F8).borderRadius(10).padding({left:16}).onChange((value:string){this.usernamevalue}).margin({bottom:16})TextInput({placeholder:请输入密码}).width(100%).height(48).backgroundColor(#F8F8F8).borderRadius(10).padding({left:16}).type(InputType.Password).onChange((value:string){this.passwordvalue})}.width(100%).margin({bottom:16})// 记住 忘记Row(){Toggle({type:ToggleType.Checkbox,isOn:false}).width(20).height(20).selectedColor(#4D96FF).onChange((value:boolean){this.rememberMevalue})Text( 记住登录).fontSize(13).fontColor(#999999)Text().layoutWeight(1)Text(忘记密码).fontSize(13).fontColor(#4D96FF)}.width(100%).margin({bottom:24})// 登录按钮Button(登 录).width(100%).height(48).backgroundColor(#4D96FF).borderRadius(24).fontColor(#FFFFFF).fontSize(16).onClick((){if(this.usernamethis.password){AlertDialog.show({title:登录成功,message:欢迎回来${this.username},confirm:{value:确定,action:(){}}})}else{AlertDialog.show({title:提示,message:请输入用户名和密码,confirm:{value:确定,action:(){}}})}}).margin({bottom:20})// 注册入口Row(){Text(还没有账号).fontSize(13).fontColor(#999999)Text(立即注册).fontSize(13).fontColor(#4D96FF).fontWeight(FontWeight.Bold)}}.width(100%).padding(24).backgroundColor(#FFFFFF).borderRadius(16)}.width(100%).height(100%).backgroundColor(#F5F6FA).padding(16)}}写在最后登录页面的核心就三件事好看、好用、反馈清晰。视觉上保持简洁不要堆太多元素交互上减少用户操作步骤反馈上不管是成功还是失败都要明确告知。这个案例的布局和设计风格可以直接复用到你的项目里改改颜色和文案就行。