harmony学习Text组件的实际应用

需求

实现一个Tab选项卡效果，底部选项卡包括：首页、任务列表、我的，点击切换不同界面。

新建组件DzTabHost.ets

组件由两部分组成：Tab、TabContent，代码如下：

// 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%')
  }
}

每个Text增加点击事件，点击后改变curPage值，然后刷新显示不同UI界面，实现Tab切换效果

运行效果

引用组件DzTabHost.ets

//code by 每日教程teachcourse.cn
@Entry
@Component
struct DzIndex {
  build() {
    Column() {
      DzTabHost()
    }.width('100%')
    .height('100%')
  }
}

运行效果