一、核心进阶知识点

1. @State 状态管理装饰器

1. 核心作用：定义组件内部响应式变量，变量值发生修改时，所有引用该变量的 UI 组件自动刷新渲染
2. 典型应用：输入框内容实时同步展示、按钮开关状态切换

2. 弹窗

用于弹出模态提示窗口，可实现消息提示、操作二次确认、自定义弹窗布局，阻断页面原有操作，突出提醒用户。

3. 页面路由

实现应用内多页面跳转逻辑，支持正向跳转、页面回退、页面间数据传递，是多页面 App 的基础通信方式。

实例总结：

@Entry
@Component
struct EnventDemo{
  @State username:string = ""
  @State password:string = ""

  build() {
    Column({space:30}) {
      Text('用户登录')
        .fontSize(32)
        .fontWeight(FontWeight.Bolder)
        .margin({ top: 20, bottom: 30 })

      TextInput({text:this.username, placeholder: "请输入账号："})
        .width(320)
        .height(52)
        .borderRadius(12)
        .fontSize(16)
        .onChange((value: string) => {
          this.username = value
        })

      TextInput({text:this.password, placeholder: "请输入密码："})
        .type(InputType.Password)
        .width(320)
        .height(52)
        .borderRadius(12)
        .fontSize(16)
        .onChange((value:string)=>{
          this.password = value
        })

      Row({ space:30 }) {
        Button("立即登录")
          .width('40%')
          .height('10%')
          .backgroundColor(0x007Dff)
          .fontSize(18)
          .borderRadius(12)
          .onClick(()=>{
            if (this.username=="root"&&this.password=="root"){
              AlertDialog.show({
                title:"登录成功",
                message:`欢迎你，${this.username}`
              })
            }else{
              AlertDialog.show({
                title:"登录失败",
                message:"用户名或者密码错误"
              })
            }
          })

        Button("清除数据")
          .width('40%')
          .height('10%')
          .backgroundColor(0x007Dff)
          .fontSize(18)
          .borderRadius(12)
          .onClick(()=>{
            this.username = ""
            this.password = ""
          })
      }
      .width(320)
      .margin({bottom:80})

    }
    .width('100%')
    .height('100%')
  }
}

二、常用交互事件

1. onChange(()=>{}) 内容变更事件

• 触发条件：绑定组件内容发生修改时触发
• 适用场景：主要搭配 TextInput 输入框使用，实时捕获用户输入内容，配合 @State 完成双向数据绑定
• 实例：

  @Entry
  @Component
  struct LoginPage{
    @State account: string = ''
    @State pwd: string = ''
  
    build() {
      Column() {
        Text('用户登录')
          .fontSize(36)
          .fontWeight(FontWeight.Bold)
          .margin({bottom:40})
  
        TextInput({text: this.account, placeholder:'请输入账号'})
          .width('85%')
          .height(50)
          .margin({bottom:15})
          .onChange((value:string)=>{
            this.account = value
          })
  
        TextInput({text: this.pwd, placeholder:'请输入密码'})
          .width('85%')
          .height(50)
          .margin({bottom:15})
          .onChange((value:string)=>{
            this.pwd = value
          })
  
        Row({space:10}){
          Button('登录')
            .width('50%')
            .height(50)
            .fontSize(20)
            .margin({ bottom: 15 })
            .onClick(() => {
              if (this.account == '' || this.pwd == '') {
                AlertDialog.show({
                  title: '登录提示',
                  message: '账号或密码不能为空！'
                })
              } else {
                AlertDialog.show({
                  title: '登录成功',
                  message: `欢迎你，账号：${this.account}`
                })
                try{
                  this.getUIContext().getRouter().pushUrl({
                    url:'pages/Home'
                  })
                }catch(e){}
              }
            })
  
          Button('清空')
            .width('50%')
            .height(50)
            .fontSize(20)
            .margin({ bottom: 15 })
            .onClick(()=>{
              this.account = ''
              this.pwd = ''
            })
        }
  
        Text("没有账号？立即注册")
          .fontSize(14)
          .fontColor(0x1677ff)
          .margin({top:10})
          .onClick(()=>{
            try{
              this.getUIContext().getRouter().pushUrl({
                url:'pages/RegisterPage'
              })
            }catch(e){}
          })
      }
      .width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Center)
      .alignItems(HorizontalAlign.Center)
      .padding(20)
    }
  }

2. onClick(()=>{}) 点击事件

• 触发条件：组件被手指点击时触发回调逻辑
• 适用场景：绑定 Button、图片、文本等可点击组件，实现状态切换、唤起弹窗、路由跳转等交互功能
• 实例：

  @Entry
  @Component
  struct EventCard{
    @State msg:string="初始文字"
    build() {
      Column({space:25}){
        Text(this.msg)
          .fontSize(30)
          .textAlign(TextAlign.Center)
  
        Button("点击修改文字")
          .onClick(()=>{
            this.msg="恭喜你，学会了鸿蒙应用开发！"
          })
          .width('100%')
          .height(50)
          .fontSize(20)
        Button("返回")
          .onClick(()=>{
            this.msg = "初始文字"
          })
          .width('100%')
          .height(50)
          .fontSize(20)
        Button("弹窗")
          .onClick(()=>{
            AlertDialog.show({
              title:"这是一个弹窗，登录成功",
              message:'欢迎你'
            })
          })
          .width('100%')
          .height(50)
          .fontSize(20)
      }
      .width('100%')
      .height('100%')
      .padding(20)
      .justifyContent(FlexAlign.Center)
    }
  }