【鸿蒙实战开发】ArkUI实战教程@State状态数据的使用

前言

对于鸿蒙生态建设而言，2024年可谓至关重要，而生态建设的前提，就是要有足够的开发人才。与之对应的，今年春招市场上与鸿蒙相关岗位和人才旺盛的热度，一方面反应了鸿蒙生态的逐渐壮大，另一方面也让人们对鸿蒙下一阶段的发展更具信心。

@State装饰器-状态数据

在前面的章节中，无论是Text还是Image、Button控件，我们都是直接在其闭包中填入一个“静态”的内容作为参数值，来表明这个控件的作用。

但更多的开发场景中，往往显示的内容会随着业务的需求而发生变化，这样我们就不能在控件中直接填入参数值，而是将参数声明出来，再根据业务场景更新这个参数的值。

举一个简单的案例，之前很火的“敲击木鱼”的案例，当用户点击“木鱼”按钮时，会显示点击的次数。以此为例我们先构建一个简单的样式。如下代码所示：

Row() {
  Column({ space: 48 }) {
    // 文字
    Text('快乐+1')
      .fontSize(17)

    // 点击按钮
    Button('点击我')
      .width(120)
      .onClick(() => {

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

上述代码中，我们显示了一个Text文字视图和Button按钮视图，并且使用Column、Row布局容器使其居中显示，这是静态页面的效果。

下一步，我们希望点击Button按钮的时候，文字内容中的“+1”能够不断累加，每点击一次增加数字1。于是，我们就需要使用到@State装饰器。

@State装饰