【ArkTS】鸿蒙开发 @State状态装饰器修饰变量的用法（实现在用户界面数量的加减）

 引言：

如果希望构建一个动态的、有交互的界面，就需要引入“状态”的概念。

状态顾名思义，是一个随时可能更新，随时会变化的东西。

此状态指UI的状态，即我们开发的用户界面的状态，普通let引出的普通变量，其值发生改变时，无法引起界面的重新渲染，界面状态不发生变化。

而状态修饰器修饰的变量发生变化会引起UI的渲染刷新

如果不使用状态变量，UI只能在初始化时渲染，后续将不会再刷新。

举例：用被状态修饰器修饰的变量来表示加减变化

实现步骤

1.用状态修饰器修饰一个变量

num 定义状态变量的位置不能搞错

2.将该变量的值显示到用户界面上

（num初始定义的是number 型 需要转换成字符串型）

Text(this.num.toString())
          .fontSize(30)
          .height(50)
          .padding({left: 10, right: 10})
          .border({width: {top: 5, bottom: 5}, color: '#999'})

3.通过onClick点击事件改变num的值

通过其自身变量值改变UI重新渲染的特性使其时刻在界面上保持最新值

 //减号
        Text('-')
          .width(50)
          .height(50)
          .border({width: 5, color: '#999', radius: {topLeft: 3, bottomLeft:3}})
          .textAlign(TextAlign.Center)
          .fontSize(30)
          .onClick(()=>{
            if(this.num<1){}
            else {
              this.num -= 1
            }
          })

        //加号
        Text('+')
          .width(50)
          .height(50)
          .border({width: 5, color: '#999', radius: {topRight: 3, bottomRight: 3}})
          .textAlign(TextAlign.Center)
          .fontSize(30)
          .onClick(()=>{
            this.num+=1
          })

完整代码

import { EditableTitleBar } from '@ohos.arkui.advanced.EditableTitleBar'
Text(this.num.toString())
  .fontSize(30)
  .height(50)
  .padding({left: 10, right: 10})
  .border({width: {top: 5, bottom: 5}, color: '#999'})
@Entry
@Component
struct Index {
@State num:number=1


  build() {
    Column() {
      Row() {
        //减号
        Text('-')
          .width(50)
          .height(50)
          .border({width: 5, color: '#999', radius: {topLeft: 3, bottomLeft:3}})
          .textAlign(TextAlign.Center)
          .fontSize(30)
          .onClick(()=>{
            if(this.num<1){}
            else {
              this.num -= 1
            }
          })
        //数量
        Text(this.num.toString())
          .fontSize(30)
          .height(50)
          .padding({left: 10, right: 10})
          .border({width: {top: 5, bottom: 5}, color: '#999'})
        //加号
        Text('+')
          .width(50)
          .height(50)
          .border({width: 5, color: '#999', radius: {topRight: 3, bottomRight: 3}})
          .textAlign(TextAlign.Center)
          .fontSize(30)
          .onClick(()=>{
            this.num+=1
          })

      }
      //.translate({x:85})
      Image($r('app.media.bsheep'))
        .width(300)
        .offset({ y: 30 })
    }
    .width('100%')
    .height('100%')

    .padding(20)
  }

}