harmony学习Text组件的实际应用

需求

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

新建组件 DzTabHost.ets

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

// code by 每日教程teachcourse.cn@Componentexport 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@Componentstruct DzIndex {  build() {    Column() {      DzTabHost()    }.width(\\\'100%\\\')    .height(\\\'100%\\\')  }}

运行效果