第 2 课：@State 状态驱动 UI

• 日期：2026-07-03
• 知识点：组件内部状态、事件驱动的数据更新
• 适用场景：计数、开关、输入内容、选中项等会变化的页面数据

上一课讲了 UIAbility -> loadContent -> 页面渲染，这一课继续学习页面内部最核心的一步：数据变化如何驱动 UI 更新。

1. @State 是组件内部状态

@State 修饰的变量属于当前组件。它变化后，依赖它的 UI 会自动刷新。无需手动“刷新页面”，只需要修改状态，让 ArkUI 重新计算对应界面。

@Entry
@Component
struct CounterPage {
  @State count: number = 0;

  build() {
    Column({ space: 12 }) {
      Text(`点击次数：${this.count}`)
        .fontSize(22)

      Button('加 1')
        .onClick(() => {
          this.count += 1;
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

2. 事件回调负责改变状态

onClick 等事件回调是用户行为入口。回调里修改数据状态，例如 this.count += 1；界面上的 Text 因为依赖 this.count 而自动更新。事件不直接操作 UI。

用户点击按钮
-> onClick 修改 count
-> ArkUI 发现状态变化
-> 依赖 count 的 Text 自动刷新

3～5 分钟练习

在页面里再加一个“清零”按钮，点击后把 count 改回 0。重点观察：没有直接修改 Text，文本仍会自动变化。

参考答案

Button('清零')
  .onClick(() => {
    this.count = 0;
  })

与上一课的联系

上一课解决“页面如何出现”，这一课解决“页面出现后如何随数据变化而更新”。