开发环境：DevEco Studio 6.0.1

一、

1.1 注册页面 RouterRegister.ets

typescript

运行

import router from '@ohos.router';
@Entry
@Component
struct RouterRegister{
 build() {
 Column({space:25}){
 Image($r('app.media.banner1'))
 .width(120)
 .height(120)
 .borderRadius(60)
 Text("注 册")
 .fontSize(32)
 .fontWeight(FontWeight.Bolder)
 Row(){
 Text("账号")
 .fontSize(26)
 .width('40%')
 .textAlign(TextAlign.Center)
 TextInput()
 .width('60%')
 .height(50)

 }
 Row(){
 Text("密码")
 .fontSize(26)
 .width('40%')
 .textAlign(TextAlign.Center)

 TextInput()
 .width('60%')
 .height(50)
 .type(InputType.Password)
 }
 Row(){
 Text("确认密码")
 .fontSize(26)
 .width('40%')
 .textAlign(TextAlign.Center)
 TextInput()
 .width('60%')
 .height(50)
 .type(InputType.Password)
 }

 Text("已有账号，立即登录")
 .fontSize(22)
 .fontColor(0xababab)
 .onClick(()=>{
 router.pushUrl({
 url:"pages/RouterLogin"
 })
 })
 Button("立即注册")
 .width('100%')
 .height(50)
 .fontSize(24)
 }
 .width('100%')
 .height('100%')
 .padding(15)
 }
}

1.2 登录页面 RouterLogin.ets

typescript

运行

import router from '@ohos.router';
@Entry
@Component
struct RouterLogin{
 build() {
 Column({space:25}){
 Image($r('app.media.banner0'))
 .width(120)
 .height(120)
 .borderRadius(60)

 Text("登 录")
 .fontSize(32)
 .fontWeight(FontWeight.Bold)

 Row({space:15}){
 Text("账 号")
 .fontSize(26)
 TextInput()
 .width("70%")
 .height(50)
 }
 Row({space:15}){
 Text("密 码")
 .fontSize(26)
 TextInput()
 .width("70%")
 .height(50)
 .type(InputType.Password)
 }
 Text("没有账号，立即注册")
 .fontSize(22)
 .fontColor(0xababab)
 .onClick(()=>{
 router.pushUrl({
 url:"pages/RouterRegister"
 })
 })
 Button("立 即 登 录")
 .width('100%')
 .height(50)
 .fontSize(24)
 }
 .width('100%')
 .height('100%')
 .padding(15)
 }
}

1.3 页面路由注册配置文件

json

{
 "src": [
 "pages/Men",
 "pages/Index",
 "pages/second",
 "pages/RouterDemo",
 "pages/Resister",
 "pages/LoginPage",
 "pages/RouterLogin",
 "pages/RouterRegister"
 ]
}

二、步骤 2：解析页面顶层基础语法

以任意页面开头代码举例：

typescript

运行

import router from '@ohos.router';
@Entry
@Component
struct RouterRegister{
 build() {
  // 所有UI布局代码
 }
}

1. import router from '@ohos.router';导入系统路由工具包，是实现页面跳转的前提，不导入则无法使用跳转 API。
2. @Entry 装饰器标记当前组件为独立页面，只有添加该装饰器的组件，才能被路由识别、单独打开。
3. @Component 装饰器声明这是一个自定义 UI 组件，所有页面、复用组件必须搭配该装饰器使用。
4. struct RouterRegisterArkTS 使用结构体定义页面，RouterRegister 是页面唯一名称，对应文件名称。
5. build(){} 函数页面渲染核心函数，所有界面组件必须写在 build 内部，页面最终展示效果由 build 内代码决定。

三、步骤 3： Column 垂直布局

代码最外层根容器：Column({space:25})

1. Column 作用：内部所有组件垂直从上到下依次排列，是本案例页面的根布局。
2. {space:25} 参数：控制 Column 内部所有子组件之间统一垂直间距 25。
3. 后置样式：
   • .width('100%') .height('100%')：让布局占满手机全屏；
   • .padding(15)：容器四周预留 15 内边距，防止内容紧贴屏幕边缘。

四、步骤 4：水平布局 Row（表单行布局）

案例存在两种 Row 写法，分开解析：

4.1 注册页无间距 Row Row(){}

内部通过 width('40%')、width('60%') 百分比分割同一行左右宽度，手动分配文字与输入框占比。

4.2 登录页带间距 Row Row({space:15})

space:15 代表同一行内文字与输入框自动留出 15 像素水平间隔，不需要手动划分百分比。

五、步骤 5：、页面基础 UI 组件

5.1 Image 图片组件

typescript

运行

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

1. $r('app.media.banner1')：系统资源读取语法，读取项目 media 文件夹下名为 banner1 的图片；
2. width/height：固定图片宽高 120；
3. borderRadius (60)：圆角值等于宽高一半，实现圆形头像效果。

5.2 Text 文本文字组件

通用属性分步说明：

• 文本内容：Text("注 册") 填写展示文字；
• .fontSize(32)：设置文字大小；
• .fontWeight(FontWeight.Bold)：文字加粗；
• .fontColor(0xababab)：设置文字灰色；
• .textAlign(TextAlign.Center)：文字在自身宽度内居中。

5.3 TextInput 输入框组件

1. 普通输入框：直接写TextInput()，支持输入普通文字账号；
2. .type(InputType.Password)：密码模式，输入内容自动隐藏为黑点，用于密码输入。

5.4 Button 按钮组件

Button("立即注册") 生成可点击按钮，可设置宽高、字号，原生代码仅做样式展示，无点击逻辑。

六、步骤 6：解析点击交互事件 onClick

代码片段：

typescript

运行

Text("已有账号，立即登录")
.onClick(()=>{
 router.pushUrl({
 url:"pages/RouterLogin"
 })
})

1. .onClick(回调函数)：绑定点击事件，Text、Button 等组件都支持；
2. 大括号内为点击后执行的代码，本案例点击文字就执行页面跳转逻辑。

七、步骤 7：核心路由功能分步解析

7.1 跳转 API：router.pushUrl

typescript

运行

router.pushUrl({
 url:"pages/RouterLogin"
})

1. url 参数：填写目标页面路径，格式固定 pages/页面文件名；
2. 功能：打开新页面，页面加入页面栈；点击手机返回键，可回到上一页。

7.2 路由配置 src 数组作用（json 配置）

json

"src": [
 "pages/RouterLogin",
 "pages/RouterRegister"
]

分步规则：

1. 所有需要跳转的页面，必须在 src 数组中写入完整路径；
2. 跳转 url 字符串必须和数组内容完全一致，区分大小写；
3. 页面未写入数组，跳转时会报错 “找不到页面”。

八、步骤 8：完整页面跳转执行流程拆解

1. 运行项目打开注册页 RouterRegister；
2. 页面从上至下渲染：圆形图片→注册标题→账号行→密码行→确认密码行→跳转文字→注册按钮；
3. 用户点击灰色文字 “已有账号，立即登录”，触发 onClick 事件；
4. 执行router.pushUrl，读取 url 值pages/RouterLogin；
5. 系统去 json 配置 src 数组匹配路径，确认页面合法；
6. 加载并打开登录页面 RouterLogin；
7. 在登录页点击底部文字，反向执行相同逻辑，跳转回注册页；
8. 任意页面点击手机返回按键，可回到上一个页面。

九、分步知识点汇总

1. 页面定义步骤：导入路由包 → @Entry+@Component 装饰器 → struct 页面名称 → build 布局函数；
2. 布局搭建步骤：外层 Column 全屏垂直布局 → 内部 Row 实现单行表单；
3. 界面渲染步骤：图片组件→标题文本→多组输入框→可点击文字→底部按钮；
4. 交互实现步骤：组件绑定 onClick 点击事件 → 事件内部执行路由跳转；
5. 路由生效步骤：页面文件创建 → json 配置 src 注册页面路径 → pushUrl 填写对应路径跳转。