当前位置：首页 > news >正文

HarmonyOS ArkTS 注册页面开发实现概括

news 2026/6/26 5:51:29

一、页面整体介绍

本案例基于鸿蒙 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目录，代码编辑器实时同步预览界面效果。