在本章中，你将学会如何使用@State装饰器的基础使用，及其实际开发中的使用场景。

@State装饰器-状态数据

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

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

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

scss 复制代码

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装饰器所表示的变量是一种状态数据，当它表示的值改变时，那么使用到@State装饰器表示的值的UI也会自动刷新。

我们将所需要动态刷新的值通过@State装饰器来表示，如下代码所示：

kotlin 复制代码

// 参数声明
@State totalNumber: number = 0

// 参数使用
Text('快乐+'+this.totalNumber.toString())

// 参数更新
this.totalNumber ++

上述代码中，我们使用@State装饰器表示了一个number数值类型的参数totalNumber，并赋予默认值为0。在显示内容上，使用"+"运算符可以进行字符串的拼接，但由于totalNumber为数值类型，因此还使用了toString方法将其转为string字符串类型。

最后在数值更新方法上，在点击按钮的交互事件中，我们使用"++"自增的方法，来实现点击按钮时自动增加数值。于是在右侧预览窗口中，我们可以体验到点击按钮实现"快乐+1"的效果。

使用场景-Progress进度条

下面我们来看一下实际的使用场景。

通过@State装饰器我们可以控制一个参数值的增加减少，我们可以想到什么实际场景，比如：进度条。如下代码所示：

less 复制代码

// 参数
@State value: number = 0

// 进度条
Progress({
  value: this.value,
  total: 100,
  type: ProgressType.Ring
})
  .style({strokeWidth: 10})
  .width(200)
  .height(200)

// 点击事件
.onClick(() => {
  this.value += 10
})

上述代码中，我们使用了Progress进度条组件来构建主体样式，设置Progress进度条的value参数绑定使用@State装饰器表示的值，用于控制进度条的进度。

当点击按钮时，我们让value的值增加10，如此实现进度条简单的控制逻辑。当然，我们也可以增加一个Text文字来显示进度文字，如下代码所示：

scss 复制代码

Stack() {
  // 进度条
  Progress({
    value: this.value,
    total: 100,
    type: ProgressType.Ring
  })
    .style({ strokeWidth: 10 })
    .width(200)
    .height(200)

  // 进度文字
  Text(this.value.toString()+'%')
    .fontSize(32)
    .fontWeight(600)
}

使用场景-Toast提示框

再来介绍另一个场景，当用户点击按钮时，常常会伴随着系统反馈信息，通常情况下，我们会使用Toast来进行友好提示。

而Toast提示的内容有时候会根据场景来决定，比如现在的Progress进度条，我们希望提示用户当前增加了多少，那么就会使用到@State装饰器来表示状态参数。

以此为例，我们实现Toast组件的相关功能，如下代码所示：

javascript 复制代码

// 引入组件
import prompt from '@ohos.promptAction';

// 使用组件
prompt.showToast({
  message: '当前进度：'+this.value.toString()+'%',
  duration: 2000
});

上述代码中，我们首先引入了'@ohos.promptAction'这一显示Toast的API，该API可以实现Dialog弹窗、Toast提示的交互效果。

在点击按钮时，调用showToast方法来显示一个Toast提示框的内容，在其参数中配置message显示的内容参数的值为this.value.toString()文字类型的进度内容，并设置duration持续时长为2000毫秒（2秒）。

如此，当每次点击的时候，我们就可以在Toast提示框中看到更新后的进度结果，这多亏了@State装饰器控制的逻辑。

快来动手试试吧～

下一章节，我们继续介绍另外2个和@State装饰器配合使用的装饰器，请保持期待吧～

ArkUI极简教程10：@State状态数据的使用

@State装饰器-状态数据

使用场景-Progress进度条

使用场景-Toast提示框