页面跳转与路由模块

一、State 变量是干什么的代码里写了 State username: string 和 State password: string 。简单理解State就是一个能让界面跟着数据变的标记。比如你在输入框里打字背后的变量在变界面上如果显示了这个变量它也会跟着变。如果不加 State变量变了界面不会刷新你改了也白改。二、Text 组件不只是显示文字页面上方有一个 Text(已有账号去登录)它看起来只是文字但它其实可以点击。通过 .onClick(() { })给它绑定了点击事件一点就跳转到登录页。这说明在 ArkUI 里几乎所有组件都可以加点击事件不只是 Button。三、router.pushUrl 的两种写法代码里出现了两种跳转方式。第一种是无参跳转只写 urlrouter.pushUrl({ url: pages/RouterLogin })适合不需要传数据的场景。第二种是带参跳转多加了一个 params字段router.pushUrl({ url: pages/HomePage, params: { username: this.username, password: this.password } })。params 里面可以放任意多个键值对相当于把数据打包带给下一个页面。四、if else 判断的实际作用立即注册按钮的点击事件里用了 if else。逻辑很简单如果用户名和密码都不为空就跳到主页如果有一个是空的就弹窗提示注册失败。这就是最基础的表单校验。实际开发中几乎所有的提交按钮都要先做校验不能让用户什么都不填就往后端发请求。五、AlertDialog.show 弹窗怎么写当用户输入不完整时用 AlertDialog.show()弹出一个提示框。它有几个关键部分title是弹窗标题message是具体提示内容primaryButton是确认按钮至少要有一个按钮否则用户没法关掉弹窗。弹窗出来之后用户必须点确定才能继续操作这样可以确保用户看到提示。六、箭头函数里的 this 不会乱代码里所有事件都用的是 () { }这种箭头函数的写法。对初学者来说记住一件事在 ArkUI 里写事件回调优先用箭头函数因为它里面的 this指的就是当前组件你能正常访问 this.username。如果你用 function() {}这种写法this会变成 undefined代码就跑不通了。七、Button 的常见属性设置立即注册按钮设置了 .width(100%)让它占满整行.height(50)让它够大够好点.fontSize(24)让文字清晰。这些是 Button 最常用的三个属性几乎每个按钮都会设置。另外还有 .backgroundColor()改背景色、.borderRadius()改圆角你可以自己试试加上去。八、Column 的 space 参数很好用最外层的 Column({ space: 25 })里面有个 space: 25意思是所有子组件之间的间距自动变成 25。这样就不用给每个组件单独设 margin了一行代码搞定所有间距页面看起来整齐又舒服。九、padding 让内容不贴边最外层 Column还加了 .padding(15)意思是内容和屏幕边缘之间留 15 的距离。如果不加这个文字和按钮会直接贴在屏幕左边和上边看起来很挤。几乎所有页面的最外层容器都应该加 padding。十、整个页面的运行流程把这十个点串起来用户操作的完整流程是这样的打开注册页 → 输入用户名和密码 → 点立即注册 → 系统检查是不是都填了 → 填了就带着数据跳到主页没填就弹窗提醒 → 用户修正后重新点击。这就是一个最基础的输入 → 校验 → 跳转/提示的交互闭环。