ArkTS 三大核心知识点总结

一、@State 状态装饰器

1. 功能：定义组件内响应式变量，变量一旦修改，页面引用该变量的 UI 自动刷新。
2. 典型场景
   • 配合TextInput与onChange，实现输入框双向绑定，实时获取账号、密码
   • 控制按钮开关、文字动态切换
3. 语法：@State 变量名: 类型 = 初始值

   import router from '@ohos.router'; import promptAction from '@ohos.promptAction'; @Entry @Component struct LoginRouter{ @State username: string = "" @State password: string = "" build() { Column({space:20}){ Text("登录") .fontSize(32) .fontWeight(FontWeight.Bolder) TextInput({text:this.username, placeholder:"请输入账号"}) .width('100%') .height(50) .onChange((value:string)=>{ this.username = value }) TextInput({text:this.password, placeholder:"请输入密码"}) .width('100%') .height(50) .type(InputType.Password) .onChange((value:string)=>{ this.password = value }) Button("登录") .height(50) .width('100%') .fontSize(22) .onClick(()=>{ if (this.username !== "" && this.password !== "") { router.pushUrl({ url: "pages/HomePage", params:{ username: this.username, password: this.password } }) } else { promptAction.showDialog({ title: "登录失败", message: "用户名或者密码不能为空" }) } }) } .width('100%') .height('100%') .padding(15) } }

二、弹窗 promptAction

1. 功能：弹出提示窗口，用来做操作提醒、表单校验提示、操作确认。
2. 常用接口
   • promptAction.showDialog()：弹窗带标题 + 提示文字，用于登录失败、必填项为空提示
   • promptAction.showToast()：轻提示文字，自动短暂消失
3. 使用前提：页面顶部导入import promptAction from '@ohos.promptAction';
4. 实例：

   import router from '@ohos.router'; @Entry @Component struct HomePage{ @State name: string = "" onPageShow(): void { const params = router.getParams() as Record<string, string> if (params) { this.name = params.username } } build() { Column(){ Text(`欢迎你，${this.name}`) .fontSize(28) } .width('100%') .height('100%') .justifyContent(FlexAlign.Center) } }

三、路由 router 页面跳转

1. 功能：实现不同页面互相跳转，支持页面之间传递数据。
2. 基础跳转
   • router.pushUrl({url:"页面路径"})：打开新页面，可返回上一页
3. 页面传参
   • 发送页：pushUrl配置params:{键值对}携带数据
   • 接收页：在生命周期onPageShow()中用router.getParams()获取参数
4. 必备配置：跳转页面必须在main_pages.json中注册路径，否则跳转报错
5. 导入依赖：import router from '@ohos.router';
6. 实例：

   { "src": [ "pages/LoginRouter", "pages/HomePage" ] }

整体综合业务（登录案例串联三点）

1. @State存储账号、密码输入内容；
2. 点击登录做非空判断，为空则调用弹窗提示；
3. 填写完整则通过路由跳转主页，同时把用户名传递到新页面展示。