一、页面整体介绍
本案例基于鸿蒙 ArkTS 语法开发用户注册页面，采用@Entry、@Component装饰器构建页面组件，通过Column纵向布局承载头像、标题、账号 / 密码输入框、跳转文字、注册按钮等全部元素；同时引入鸿蒙路由模块@ohos.router，实现注册页向登录页的页面跳转功能，页面布局居中规整，区分普通输入框与密码隐藏输入框，完成基础注册 UI 交互搭建。
二、页面布局结构说明
- 顶部区域：圆形头像图片 + 加粗 “注册” 标题，图片通过圆角属性实现圆形裁剪；
- 表单区域：三组
Row横向布局，每组左侧为文字标签（账号 / 密码 / 确认密码）、右侧为输入框，密码与确认密码输入框设置密码隐藏输入类型； - 交互区域：可点击灰色文字跳转登录页、全屏宽度蓝色注册按钮；
- 全局样式：根容器铺满屏幕宽高，统一内边距，组件之间设置固定纵向间距。
三、完整实现代码
typescript
运行
// 导入鸿蒙路由模块，实现页面跳转 import router from '@ohos.router'; // 页面入口装饰器 @Entry // 自定义组件装饰器 @Component struct RouterRegister{ build() { // 纵向布局，组件纵向间距25 Column({space:25}){ // 顶部圆形头像 Image($r('app.media.ban')) .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) } }四、页面效果图展示
效果图说明
右侧预览模拟器中完整呈现开发效果：
- 页面最上方为圆形院校头像图片；
- 下方加粗 “注册” 大标题；
- 依次排列账号、密码、确认密码输入框，密码框自带隐藏显示图标；
- 灰色可点击跳转文字、底部通栏蓝色 “立即注册” 按钮； 左侧工程目录可看到页面文件
zhuce.ets，图片资源存放于resources/media目录，代码编辑器实时同步预览界面效果。
五、核心功能要点总结
- 布局组件：
Column纵向排布页面全部内容，Row实现标签与输入框左右分栏； - 图片处理：
borderRadius设置图片圆角，宽高一致实现圆形头像； - 输入框区分：普通账号输入框、
InputType.Password密码隐藏输入框； - 页面路由：导入
router模块，pushUrl实现点击文字跳转登录页面； - 样式控制：统一字号、尺寸、文字颜色、容器边距，适配移动端页面展示。
