鸿蒙开发之ArkUI 界面篇 二十四 计数器案例

计数器案例，点击’-‘按钮，数字减少1，点击啊‘+’按钮，数字加一

分析：这里需要三个组件，外层容器是Row，从左往右的组件分别是Button+Text+Button，涉及到修改更新界面，变量需要用State修饰，代码如下:

@Entry
@Component
struct Index {
  @State textNum:number = 13
  build() {
    Row(){
      Row(){
        Button('-').onClick(() =>{
          this.textNum-=1;
        })
        Text(this.textNum.toString()).margin({
          left:15,
          right:15
        })
        Button('+').onClick(()=>{
          this.textNum+=1
        })
      }.margin(20)

    }.width('100%')
    .height('100%')
    .backgroundColor(Color.Pink)
    .alignItems(VerticalAlign.Top)

}
}

总结：鸿蒙界面数据的更新需要用到在变量前加@State，修饰的变量改变后界面就能自动更新，在Struct里面的变量使用的时候需要使用this.变量名字。