一、状态

1. @State 状态装饰器

 作用： 修饰页面内变量为响应式状态变量：变量值一旦修改，页面绑定该变量的 UI 组件会自动刷新，实现数据驱动界面

适用场景 ：登录账号密码输入、开关状态、计数、表单数据双向绑定。

整体功能总结

1. 使用@State创建响应式数字num，初始 = 10；

2. 页面展示当前数字，两个按钮控制增减；

3. 边界限制：数字最小 0、最大 10，超出范围按钮点击无效果；

4. 只要修改this.num，绑定该变量的 Text 组件自动刷新，这就是@State的核心作用 ——数据驱动 UI 自动更新。

 关键知识点

• @State：组件内部私有状态，变量变更自动刷新当前组件 UI；

• Column/Row：ArkUI 基础线性布局（纵向 / 横向）；

• Button.onClick：点击交互事件；

• 模板字符串 `${变量}`：在 Text 中动态展示数字。

整体运行逻辑

1. 初始化：inputText 为空，上方文字只显示 “你输入的内容是:”，输入框显示提示语；

2. 用户在输入框打字 → onChange 捕获输入内容，赋值给 inputText；

3. inputText 被 @State 修饰，值改变后自动刷新所有用到它的 UI；

4. 上方 Text 立刻渲染最新输入的文字，实现输入实时预览。  

核心知识点

1. @State：组件内私有响应状态，数据一变 UI 自动更新；

2. TextInput：鸿蒙基础输入组件，onChange 监听文本变化；

3. 单向数据流模拟双向绑定：输入框修改状态变量，页面文本读取状态变量，完成联动；

4. 模板字符串 `${变量}`：动态渲染文本内容。

整体运行逻辑

1. 初始 isShow = true：页面显示红色文字「状态已开启」；

2. 点击蓝色按钮 → isShow 取反变成 false；

3. @State 监听变量变化，自动刷新 Text 组件：文字变为黄色「状态已关闭」；

4. 再次点击按钮，isShow 变回 true，文字和颜色切回初始样式。  

重点知识点

1. @State 响应式变量：数据驱动 UI，变量一变界面自动更新；

2. 布尔取反 !变量：快速实现开关、切换类逻辑；

3. 三元表达式 条件 ? A : B：一行代码实现动态文字、动态样式；

4. 普通 private 变量无响应能力，修改不会刷新页面；

5. 布局容器 Column 纵向排列，space 控制组件间距，padding 设置页面边距。                         

2. 弹窗 两类弹窗 API

1. 轻提示 Toast：promptAction.showToast()，短暂弹出文字提示（登录成功 / 输入为空提醒）

2. 确认弹窗 AlertDialog：弹出带确认 / 取消按钮的对话框，用于二次确认操作

3. 路由 router（页面跳转）

作用： 实现多页面之间互相跳转、返回上一页，是多页面项目核心 API。

核心方法 1. router.pushUrl({url:"页面路径"})：跳转到新页面，保留上一页 2. router.back()：返回上一页

配套练习文件：

• 专项路由案例：RouterDemo.ets

整体运行流程

1. 打开当前RouterDemo页面，页面只显示一个蓝色胶囊按钮；

2. 点击【页面 1】按钮；

3. 路由pushUrl执行，根据路径pages/PageOne加载并跳转到 PageOne 页面；

4. 页面栈会保存当前 RouterDemo 页面，在 PageOne 页面可调用router.back()返回本页面。

 关键知识点

1. Router 路由 API ◦ pushUrl()：新页面入栈，支持返回上一页； ◦ 配套常用：back() 返回上一页、replaceUrl() 替换当前页面（不保留原页面）。  

2. 页面路径规则：url 必须填写pages/下页面的相对路径，路径写错会跳转失败。

3. ButtonType.Capsule：鸿蒙内置胶囊按钮，自带大圆角。

4. @State变量这里仅声明未使用，修改message才会更新上方 Text 文本。

5. 布局嵌套：Row 包 Column，纵向居中展示按钮。

• 多页面跳转示例：Index.ets、Index2.ets、PageOne.ets、Second.ets

 适用场景: 首页点按钮跳登录页、登录页跳注册页、返回首页

完整跳转 & 返回流程

1. 打开 RouterDemo 首页，点击【页面 1】；

2. 执行 pushUrl，页面栈新增 PageOne，跳转到本页面；

3. 本页面显示文字「这是第一个页面」+ 返回按钮；

4. 点击【返回】按钮，执行 router.back()，销毁当前 PageOne 页面，回到之前的 RouterDemo 页面。  

关键知识点

1. 路由成对 API

◦ pushUrl()：打开新页面，存入页面栈，可以返回；

◦ back()：销毁当前页面，回到栈里上一页；  

2. ButtonType.Capsule：鸿蒙内置胶囊圆角按钮；

3. stateEffect: true：按钮点击有按压变暗交互反馈；

4. @State 变量绑定 Text，实现数据驱动文字更新；

5. 页面栈机制：push 入栈、back 出栈，是鸿蒙多页面导航基础。

.placeholder：输入框灰色提示文字type(InputType.Password)：密码模式，输入内容变成黑点隐藏
同样用onChange实时把密码存入this.password
.onChange()：输入监听事件，用户每输入 / 删除文字都会触发
回调里把输入内容赋值给 this.username，实时保存账号

① 判断逻辑
if(this.username !=="" && this.password !=="")
只有账号、密码都不为空时，才执行页面跳转，简单表单校验。
② router.pushUrl 路由跳转 + 传参
url:"pages/HomePage"：要跳转到的目标页面（首页 HomePage.ets）
params:{}：页面传参对象，把当前页面的账号、密码传递给首页
username:this.username：携带账号
password:this.password：携带密码

合TextInput.onChange实时捕获用户输入，保存表单数据。
TextInput.onChange
输入框内容改变时触发，用来收集表单数据。
路由跳转 router.pushUrl
url：目标页面路径
params：页面间传递数据，目标页面可接收使用

main文件

1.登记项目中所有可跳转、可预览的页面；
2.router.pushUrl() 跳转页面时，系统会从这里校验页面路径，不在此文件里注册的页面无法跳转；
3.预览器、模拟器运行时，仅识别该文件内声明的页面。

4. 事件回调：onChange ()

作用 :监听输入类组件内容变化，每次输入内容改变就触发回调函数，常和@State变量配合实现双向绑定。

常用组件：TextInput 输入框、Toggle 开关、Slider 滑动条

5. 事件回调：onClick ()

作用 :监听组件点击操作，点击时执行内部代码逻辑，是最常用交互事件。

常用组件：Button 按钮、可点击 Text 文字、Image 图片

典型用途 :页面路由跳转、弹窗提示、数值增减、登录校验。

完整运行流程

1. 页面加载，账号、密码输入框为空；

2. 在账号框输入root，密码框输入123456；

3. 点击【立即登录】→ 弹出登录成功弹窗；

4. 输入任意其他账号密码，点击登录 → 弹出登录失败弹窗；

5. 点击【清除信息】，两个输入框内容全部清空。  

核心知识点

1. @State双向绑定：TextInput 输入内容实时同步到变量，修改变量同步更新输入框；

2. InputType.Password：密码框隐藏文本；

3. AlertDialog.show()：全局弹窗提示；

4. 条件判断if/else做登录表单校验；

5. 赋值空字符串清空表单，利用响应式自动刷新界面；

6. Row+Column 嵌套组合实现表单垂直排列、按钮水平并排。

整体运行流程

1. 页面初始化：Text 显示「初始文字」，三个蓝色按钮垂直居中排列；

2. 点击【点击修改文字】：顶部文字更新为恭喜文案；

3. 点击【返回】：文字重置回「初始文字」；

4. 点击【弹窗】：弹出提示弹窗，显示标题和欢迎文字。  

核心知识点

1. @State响应式变量：数据驱动 UI，变量变更界面自动刷新；

2. Button.onClick()：基础点击交互事件；

3. AlertDialog系统弹窗，用于消息提示；

4. Column 布局：space控制组件间距、justifyContent(FlexAlign.Center)实现垂直居中；

5. 直接给@State变量重新赋值，即可完成页面文本更新。