harmony学习Text组件的实际应用

2024-03-11 21:45 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%')
  }
}

运行效果

当前文章价值6.99元,扫一扫支付后添加微信提供帮助!(如不能解决您的问题,可以申请退款)

你可能感兴趣的文章

来源:每日教程每日一例,深入学习实用技术教程,关注公众号TeachCourse
转载请注明出处: https://www.teachcourse.cn/3121.html ,谢谢支持!

资源分享

分类:harmony 标签:
ubuntu重新安装workpress ubuntu重新安装workpress
java提供的容器类 java提供的容器类
mysql重新启动失败 mysql重新启动失败
动态给TextView控件设置权重 动态给TextView控件设置权重

评论已关闭!