一、知识点前置说明本案例结合 **State 响应式状态变量 **、自定义弹窗弹窗控制、表单输入校验、router 页面路由跳转四大核心知识点实现「点击按钮弹出登录弹窗→输入账号密码校验→登录成功关闭弹窗并跳转主页」完整业务逻辑。 区别于独立登录页面跳转方案弹窗登录无需新开页面在当前页面弹出浮层表单常用于首页、商品页快速登录场景开发核心依靠布尔状态变量控制弹窗显隐搭配 Stack 层叠布局实现遮罩浮层效果。整体开发分为三大核心步骤定义弹窗控制变量、搭建页面按钮 登录弹窗结构、编写登录按钮校验与路由跳转逻辑。步骤 1LoginRouter 页面定义响应式控制变量1.1 变量作用与原理State是 ArkTS 核心响应式装饰器被修饰的变量发生数值变化时页面会自动刷新 UI 视图。 我们需要定义三组状态变量各司其职State showLoginDialog: boolean false布尔控制变量默认值false代表弹窗隐藏赋值为true时弹窗显示赋值回false弹窗关闭是弹窗显隐的总开关。State username: string 双向绑定账号输入框实时接收用户输入的账号文本。State password: string 双向绑定密码输入框实时接收用户输入的密码文本。1.2 变量定义规范所有State状态变量必须写在自定义组件struct内部、build()函数之外放置在组件最顶部位置统一管理页面所有交互状态。步骤 2搭建页面主体按钮 层叠登录弹窗结构2.1 页面分层设计思路页面分为两大区域底层基础页面放置「打开登录」主按钮页面默认展示内容上层弹窗遮罩层使用Stack层叠布局实现浮窗仅当showLoginDialog true时渲染包含半透明黑色遮罩 白色登录表单卡片。2.2 组件结构拆解底层 Column 容器承载页面标题、【打开登录】触发按钮Stack 层叠容器实现弹窗浮层效果分为两层第一层半透明黑色遮罩点击遮罩可关闭弹窗第二层白色圆角登录卡片内部包含标题、账号输入框、密码输入框、登录按钮、关闭弹窗按钮。输入框配置密码输入框开启InputType.Password密文隐藏模式通过.onChange实时同步输入内容至username/password状态变量。拓展知识点补充弹窗使用if(this.showLoginDialog)条件渲染弹窗隐藏时不会占用页面渲染资源性能更优Stack 布局天然实现图层叠加遮罩层放在底层、登录卡片放在上层完美模拟弹窗浮层效果遮罩添加点击关闭逻辑提升用户交互体验符合主流 App 设计规范。步骤 3登录按钮校验逻辑 主页路由跳转3.1 登录完整业务流程拆解点击弹窗内【登录】按钮后代码执行顺序表单非空校验判断username、password两个输入变量是否为空字符串分支 A校验通过账号密码均有内容 ① 将弹窗控制变量showLoginDialog设为false关闭登录弹窗 ② 导入router路由工具调用replaceUrl跳转主页pages/Homepage分支 B校验失败账号 / 密码为空 弹出系统AlertDialog提示框告知用户「用户名或者密码不能为空」弹窗保持打开状态允许用户重新输入。3.2 路由 API 选型说明replaceUrl登录场景优先使用router.replaceUrl()而非pushUrl()replaceUrl替换当前页面栈登录成功跳转到主页后点击返回键不会回到登录弹窗页面符合登录一次性业务逻辑pushUrl新增页面栈返回时会退回弹窗页不符合登录业务需求。3.3 主页 Homepage 页面代码说明主页仅作为登录成功后的目标页面无需复杂逻辑页面路径必须和route_map.json路由注册表中配置路径完全一致3.4 前置路由配置要求易错点补充想要跳转Homepage主页必须提前在项目route_map.json的src数组中注册页面路径否则跳转报错{ src: [ pages/LoginRouter, pages/Homepage ] }修改 json 后必须点击「立即同步」否则页面无法识别。四、拓展加分内容课堂拔高作业亮点4.1 状态变量联动逻辑说明State变量是实现弹窗、表单联动的核心用户输入框打字 →onChange同步文本到username/password点击「打开登录」→showLoginDialogtrueif 条件成立弹窗渲染登录成功 / 点击取消 / 点击遮罩 →showLoginDialogfalse弹窗销毁隐藏。4.2 功能拓展优化方向可写进作业加分加强表单校验增加账号长度、密码长度判断限制最少 6 位字符密码显隐切换按钮新增图标按钮切换InputType.Normal明文 /InputType.Password密文登录加载动画点击登录后添加加载提示模拟网络请求延时本地存储登录状态登录成功后用Preferences存储登录标识下次打开自动跳过弹窗。4.3 开发常见报错与解决方案点击按钮弹窗不弹出 原因忘记给按钮绑定onClick、变量未加State修饰变量修改不会刷新 UI跳转主页提示页面不存在 原因route_map.json 未注册 Homepage 页面、路径书写大小写错误、未同步 json输入框内容无法获取 原因缺少.onChange回调没有将输入值同步到username/password变量。五、整体业务流程总结定义 3 个State响应式变量分别控制弹窗显隐、存储账号、存储密码底层页面放置【打开登录】按钮点击修改变量弹出 Stack 层叠弹窗弹窗内置账号、密码输入框实时同步用户输入内容点击登录按钮执行表单非空校验输入合法关闭弹窗使用router.replaceUrl跳转登录主页输入为空弹出 AlertDialog 提示用户补充信息登录成功进入独立 Homepage 主页完成整套弹窗登录业务闭环。
