完整可运行代码 + 逐行详细讲解（注册页面 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.password==this.password2)){
            // 校验通过：跳转到登录页面
            router.pushUrl({
              url:"pages/RouterLogin"
            })
          }else {
            // 校验失败：弹出提示弹窗
            AlertDialog.show({
              title:"注册失败",
              message:`注册的账号/密码为空，或两次密码不一致，当前账号：${this.username}`
            })
          }
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}

二、整体功能介绍

这是鸿蒙 ArkTS用户注册页面，完整实现表单填写、表单校验、页面路由跳转、错误弹窗提示四大功能：

1. UI 布局：顶部圆形图标、注册标题、账号输入框、密码输入框、确认密码输入框、注册按钮；
2. 数据双向绑定：输入账号 / 密码实时存入@State变量；
3. 表单校验逻辑：点击注册按钮自动判断
   • 账号、密码不能为空；
   • 两次输入密码必须完全相同；
4. 分支交互： ✅ 校验全部通过 → 路由跳转到登录页面 RouterLogin ❌ 校验不通过 → 弹出对话框提示注册失败，展示当前输入账号

三、分模块逐段详解

1. 头部导入与装饰器

ets

import router from '@ohos.router';
import AlertDialog from '@ohos.promptAction';
@Entry
@Component
struct RouterRegister

• router：系统路由 API，实现页面之间跳转；
• AlertDialog：弹窗提示组件，注册失败时弹出提示；
• @Entry：页面入口，预览器可直接打开；
• @Component：自定义 UI 组件标识。

2. @State 响应式变量（表单存储核心）

ets

@State username:string = ""   // 账号
@State password:string = ""   // 第一次输入密码
@State password2:string = ""  // 确认密码

@State修饰变量具备数据驱动刷新特性：输入框内容改变，变量同步更新；变量参与判断、文字渲染会实时生效。

3. 页面顶部静态 UI 组件

（1）圆形图标

ets

Image($r('app.media.startIcon'))
  .width(120)
  .height(120)
  .borderRadius(60)

• $r('app.media.startIcon')：读取项目 media 目录下的图片资源；
• 宽高 120，圆角 60 → 宽高一半 = 完美圆形头像。

（2）标题文字

ets

Text("注 册")
  .fontSize(32)
  .fontWeight(FontWeight.Bold)

大号加粗标题，区分页面功能。

4. Row 水平布局：账号 / 密码输入行（表单布局）

ets

Row(){
  Text("账 号")
    .width('40%')
    .textAlign(TextAlign.Center)
  TextInput({text:this.username})
    .width('60%')
    .onChange((value)=>{this.username=value})
}

1. Row水平布局，左右分为文字标签（40% 宽度）、输入框（60% 宽度）；
2. TextInput({text:变量})：输入框与响应式变量双向绑定；
3. .onChange()：监听输入，每输入字符同步赋值给变量；
4. .type(InputType.Password)：密码专用输入框，内容自动隐藏为黑点。

5. 注册按钮 & 核心校验逻辑（最重要）

ets

Button("立即注册")
  .onClick(()=>{
    // 判断条件
    if((this.username!="")&&(this.password!="")&&(this.password==this.password2)){
      // 校验成功：跳转登录页
      router.pushUrl({url:"pages/RouterLogin"})
    }else {
      // 校验失败：弹窗提示
      AlertDialog.show({
        title:"注册失败",
        message:`注册的账号/密码为空，或两次密码不一致，当前账号：${this.username}`
      })
    }
  })

条件判断拆解

1. this.username!=""：账号不能空；
2. this.password!=""：密码不能空；
3. this.password==this.password2：两次密码输入必须一致； 三个条件同时满足才判定注册有效。

分支功能

1. 成功分支：router.pushUrl() 入栈跳转到登录页面，支持返回注册页；
2. 失败分支：AlertDialog.show() 弹出系统对话框，标题 + 提示文案，文案内插值展示当前输入的账号。

6. 外层 Column 全局布局

ets

Column({space:25}){...}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)

• space:25：内部所有组件上下间距 25；
• width/height 100%：铺满手机全屏；
• justifyContent(FlexAlign.Center)：垂直居中；
• alignItems(HorizontalAlign.Center)：水平居中； 页面所有表单内容整体居中，和预览器效果一致。

四、完整操作流程演示

1. 打开注册页面，所有输入框空白；
2. 填写账号、密码、确认密码：
   • 场景 1：账号空 / 密码空 / 两次密码不一样 → 点击注册弹出「注册失败」弹窗；
   • 场景 2：账号、密码完整且两次密码相同 → 弹窗不弹出，自动跳转到登录页面；
3. 跳转后可通过手机返回键回到注册页面（pushUrl 页面栈特性）。

五、核心学习知识点总结

1. @State响应式变量实现表单数据存储；
2. Row+Column横竖组合布局实现表单左右标签 + 输入框样式；
3. TextInput密码输入框 InputType.Password 隐藏内容；
4. 表单逻辑判断 if-else 分支处理；
5. router.pushUrl 页面路由跳转；
6. AlertDialog 弹窗消息提示；
7. 字符串插值 ${变量} 在弹窗文字中动态展示输入内容；
8. 图片圆角、页面整体居中布局技巧