harmony学习状态管理State关键字

需求

界面Text文本内容发生改变后，需要通知界面UI控件刷新，显示新文本的内容。

State关键字

State关键字装饰的变量，变量的值发生改变后，变量关联的控件会自动刷新，显示新的内容。

参考：harmony学习状态管理State关键字

// code by 每日教程teachcourse.cn
@Component
export struct DzTabHost {
  @State tab1: string = '首页'
  @State tab2: string = '任务列表'
  @State tab3: string = '我的'
  @State curPage: number = 1

  build() {
    Column() {
      // TabContent
      Column() {
        if (this.curPage == 0) {

          Text('我是首页')
            .fontSize($r('app.float.px32'))
            .fontColor(Color.Red)
        } else if (this.curPage == 1) {
          Text('我是任务列表')
            .fontSize($r('app.float.px32'))
            .fontColor(Color.Red)
        } else if (this.curPage == 2) {
          Text('我是个人中心')
            .fontSize($r('app.float.px32'))
            .fontColor(Color.Red)
        }
      }.layoutWeight(1)
      .width('100%')

      // Tab
      Row() {

        Text(this.tab1)
          .height('100%')
          .textAlign(TextAlign.Center)
          .border({ width: { right: $r('app.float.px1') }, color: Color.Grey })
          .layoutWeight(1)
          .onClick(() => {
            this.curPage = 0
          })

        Text(this.tab2)
          .height('100%')
          .textAlign(TextAlign.Center)
          .layoutWeight(1)
          .onClick(() => {
            this.curPage = 1
          })

        Text(this.tab3)
          .height('100%')
          .textAlign(TextAlign.Center)
          .border({ width: { left: $r('app.float.px1') }, color: Color.Grey })
          .layoutWeight(1)
          .onClick(() => {
            this.curPage = 2
          })
      }
      .width('100%')
      .height($r('app.float.px68'))
    }.width('100%')
    .height('100%')
  }
}

curPage使用State关键字装饰，点击Tab切换后改变了curPage的值，关联的Column()控件被刷新，显示if条件的内容。