完整可运行代码 逐行详细讲解注册页面 RouterRegister.ets一、完整整合代码ets// 1.导入路由模块页面跳转必备 import router from ohos.router; // 弹窗提示组件 import AlertDialog from ohos.promptAction; Entry Component struct RouterRegister{ // 响应式变量存储账号、密码、确认密码 State username:string State password:string State password2:string build() { // 外层垂直布局内部组件上下间距25 Column({space:25}){ // 顶部图标 Image($r(app.media.startIcon)) .width(120) .height(120) .borderRadius(60) // 圆形头像 // 页面标题 Text(注 册) .fontSize(32) .fontWeight(FontWeight.Bold) // 账号输入行水平布局 文字输入框左右并排 Row(){ Text(账 号) .fontSize(26) .width(40%) .textAlign(TextAlign.Center) TextInput({text:this.username}) .width(60%) .height(50) .onChange((value:string){ this.username value }) } // 密码输入行 Row(){ Text(密 码) .fontSize(26) .width(40%) .textAlign(TextAlign.Center) TextInput({text:this.password2}) .width(60%) .height(50) .type(InputType.Password) // 密码框隐藏输入内容 .onChange((value:string){ this.password value }) } // 【拓展】确认密码行逻辑配套校验 Row(){ Text(确认密码) .fontSize(26) .width(40%) .textAlign(TextAlign.Center) TextInput({text:this.password2}) .width(60%) .height(50) .type(InputType.Password) .onChange((value:string){ this.password2 value }) } // 注册按钮 Button(立即注册) .width(100%) .height(50) .fontSize(24) .onClick((){ // 判断条件账号非空、密码非空、两次密码一致 if((this.username!)(this.password!)(this.passwordthis.password2)){ // 校验通过跳转到登录页面 router.pushUrl({ url:pages/RouterLogin }) }else { // 校验失败弹出提示弹窗 AlertDialog.show({ title:注册失败, message:注册的账号/密码为空或两次密码不一致当前账号${this.username} }) } }) } .width(100%) .height(100%) .justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Center) } }二、整体功能介绍这是鸿蒙 ArkTS用户注册页面完整实现表单填写、表单校验、页面路由跳转、错误弹窗提示四大功能UI 布局顶部圆形图标、注册标题、账号输入框、密码输入框、确认密码输入框、注册按钮数据双向绑定输入账号 / 密码实时存入State变量表单校验逻辑点击注册按钮自动判断账号、密码不能为空两次输入密码必须完全相同分支交互 ✅ 校验全部通过 → 路由跳转到登录页面RouterLogin❌ 校验不通过 → 弹出对话框提示注册失败展示当前输入账号三、分模块逐段详解1. 头部导入与装饰器etsimport router from ohos.router; import AlertDialog from ohos.promptAction; Entry Component struct RouterRegisterrouter系统路由 API实现页面之间跳转AlertDialog弹窗提示组件注册失败时弹出提示Entry页面入口预览器可直接打开Component自定义 UI 组件标识。2. State 响应式变量表单存储核心etsState username:string // 账号 State password:string // 第一次输入密码 State password2:string // 确认密码State修饰变量具备数据驱动刷新特性输入框内容改变变量同步更新变量参与判断、文字渲染会实时生效。3. 页面顶部静态 UI 组件1圆形图标etsImage($r(app.media.startIcon)) .width(120) .height(120) .borderRadius(60)$r(app.media.startIcon)读取项目 media 目录下的图片资源宽高 120圆角 60 → 宽高一半 完美圆形头像。2标题文字etsText(注 册) .fontSize(32) .fontWeight(FontWeight.Bold)大号加粗标题区分页面功能。4. Row 水平布局账号 / 密码输入行表单布局etsRow(){ Text(账 号) .width(40%) .textAlign(TextAlign.Center) TextInput({text:this.username}) .width(60%) .onChange((value){this.usernamevalue}) }Row水平布局左右分为文字标签40% 宽度、输入框60% 宽度TextInput({text:变量})输入框与响应式变量双向绑定.onChange()监听输入每输入字符同步赋值给变量.type(InputType.Password)密码专用输入框内容自动隐藏为黑点。5. 注册按钮 核心校验逻辑最重要etsButton(立即注册) .onClick((){ // 判断条件 if((this.username!)(this.password!)(this.passwordthis.password2)){ // 校验成功跳转登录页 router.pushUrl({url:pages/RouterLogin}) }else { // 校验失败弹窗提示 AlertDialog.show({ title:注册失败, message:注册的账号/密码为空或两次密码不一致当前账号${this.username} }) } })条件判断拆解this.username!账号不能空this.password!密码不能空this.passwordthis.password2两次密码输入必须一致 三个条件同时满足才判定注册有效。分支功能成功分支router.pushUrl()入栈跳转到登录页面支持返回注册页失败分支AlertDialog.show()弹出系统对话框标题 提示文案文案内插值展示当前输入的账号。6. 外层 Column 全局布局etsColumn({space:25}){...} .width(100%) .height(100%) .justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Center)space:25内部所有组件上下间距 25width/height 100%铺满手机全屏justifyContent(FlexAlign.Center)垂直居中alignItems(HorizontalAlign.Center)水平居中 页面所有表单内容整体居中和预览器效果一致。四、完整操作流程演示打开注册页面所有输入框空白填写账号、密码、确认密码场景 1账号空 / 密码空 / 两次密码不一样 → 点击注册弹出「注册失败」弹窗场景 2账号、密码完整且两次密码相同 → 弹窗不弹出自动跳转到登录页面跳转后可通过手机返回键回到注册页面pushUrl 页面栈特性。五、核心学习知识点总结State响应式变量实现表单数据存储RowColumn横竖组合布局实现表单左右标签 输入框样式TextInput密码输入框InputType.Password隐藏内容表单逻辑判断if-else分支处理router.pushUrl页面路由跳转AlertDialog弹窗消息提示字符串插值${变量}在弹窗文字中动态展示输入内容图片圆角、页面整体居中布局技巧