本次项目由两个页面组成分别是用户登录页面和登录成功主页。整体实现效果为打开应用展示登录界面用户点击登录按钮后系统自动跳转至新的页面完成一次完整的页面路由切换流程。页面功能设计1. 登录页面功能登录页面是应用的首页面页面整体采用垂直居中布局界面包含页面标题、账号输入框、密码输入框以及登录按钮。界面布局整洁组件间距合理适配手机全屏展示效果。账号与密码输入框支持用户内容输入为后续账号密码校验功能预留了拓展空间。登录按钮是本页面的核心交互控件主要负责触发页面跳转逻辑。间距输入框登录按钮核心技术原理路由机制首先需要在对话框中将两个文件名写入并同步其次在登录页面完成基础配置随后在首行加入意思是系统内置路由模块无需额外安装依赖所有页面跳转操作都依赖该模块 API然后在按钮代码下写入onclick页面跳转的方法router.pushUrl({url:pages/xg44})作用是往路由栈新增页面从 xg43 跳转到 xg44 后系统保留登录页随后完成剩余基础配置即可核心代码如下import router from ohos.router;EntryComponentstruct lo{build() {Column({space:40}){Text(用户注册).fontSize(32).fontWeight(FontWeight.Bolder).margin({top:20,bottom:10})TextInput({placeholder:请输入手机号或邮箱}).width(320).height(52).borderRadius(12).fontSize(16)TextInput({placeholder:请输入密码}).type(InputType.Password).width(320).height(52).borderRadius(12).fontSize(16)TextInput({placeholder:请再次输入密码}).type(InputType.Password).width(320).height(52).borderRadius(12).fontSize(16)Button(立即注册).width(320).height(52).backgroundColor(0x007dff).fontSize(16).borderRadius(12)Text(已有账号返回登录).fontSize(14).fontColor(0x1677ff).onClick((){router.pushUrl({url:pages/Logins})})}.backgroundColor(0xf8f8f8).height(100%).width(100%).justifyContent(FlexAlign.Center)}}只需复制一下Logins的代码把加红部分修改一下然后创建连接在main_pages.json只需添加最后两行代码即可pages/Logins,pages/Register1最后即可实现两个页面的跳转点击没有账号立即注册即可完成跳转如何制作用户登录表1.先判断是横向布局还是垂直布局根据图片判断是垂直布局2.写出基本框架EntryComponentstruct Login1{build() {Column(){}}}3.从上往下依次罗列引用Text文本在里面呈现“用户登录”四个字Text(用户登录).fontSize(32).fontWeight(FontWeight.Bolder).margin({top:20,bottom:30})然后引入文本框 TextInput({placeholder:})写出我们所需的账号及密码TextInput({placeholder:请输入账号}).width(320).height(52).borderRadius(12).fontSize(16)TextInput({placeholder:请输入密码}).type(InputType.Password).width(320).height(52).borderRadius(12).fontSize(16)然后“登录”这里我们需要用到按钮Button组件Button(立即登录).width(320).height(52).backgroundColor(0x007Dff).fontSize(18).borderRadius(12)引入文本TextText(用户注册 | 忘记密码)最后设置一个版权信息的书写Text(鸿蒙应用开发实训系统2026).fontSize(14).fontColor(Color.Gray).margin({top:40})4.最终代码及效果图如图所示EntryComponentstruct Login{State isOn: boolean falsebuild() {Column({space:30}){Text(用户登录).fontSize(32).fontWeight(FontWeight.Bolder).margin({top:20,bottom:30})TextInput({placeholder:请输入账号}).width(320).height(52).borderRadius(12).fontSize(16)TextInput({placeholder:请输入密码}).type(InputType.Password).width(320).height(52).borderRadius(12).fontSize(16)Button(立即登录).width(320).height(52).backgroundColor(0x007Dff).fontSize(18).borderRadius(12)Text(用户注册 | 忘记密码)Text(鸿蒙应用开发实训系统2026).fontSize(14).fontColor(Color.Gray).margin({top:40})}.backgroundColor(Color.White).width(100%).height(100%).justifyContent(FlexAlign.Center)}}