首页 > 其他分享> 文章详细

【HarmonyOS】【ARKUI】鸿蒙 ets 方式 tabs+tabcontent 实现底部导航栏

2022-04-08 10:02:33 阅读：270 来源： 互联网

标签：ets tabcontent Center tabs 100% height 60 width Color

在鸿蒙开发中tab切换功能（如下图所示）是非常常见一个功能，今天描述如下功能怎么实现？开发中需要准备哪些资料？

今天我们从“资料准备”，“Tabs功能实现”，“底部按钮功能实现”，“运行效果”四个方面进行描述

1. 开发准备

1.1 资料准备想要实现如上图功能的话，需要学习“Tabs”，“TabContent”，“ Row”，“Column”，等等相关技术

1.2 图片准备准备六张图片（图片如下）放在resources/base/media/目录下

图片存放的位置

2. Tabs功能实现

2.1 详细资料参考“Tabs”，“TabContent”的官方文档

代码如下

@Entry
@Component
struct MyNewsIndex {
  private controller: TabsController = new TabsController()
      
  build() {
    Flex ({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Tabs({ controller: this.controller }) {
        TabContent() {
          Text("首页")
            .width('100%').height('100%')
            .fontSize(50)
            .textAlign(TextAlign.Center)
            .fontColor(Color.White)
            .backgroundColor(Color.Pink)
        }.tabBar('首页')
        TabContent() {
          Text("消息")
            .width('100%').height('100%')
            .fontSize(50)
            .textAlign(TextAlign.Center)
            .fontColor(Color.White)
            .backgroundColor(Color.Blue)
        }.tabBar('消息')
        TabContent() {
          Text("我的")
            .width('100%').height('100%')
            .fontSize(50)
            .textAlign(TextAlign.Center)
            .fontColor(Color.White)
            .backgroundColor(Color.Red)
        }.tabBar('我的')
      }
      .scrollable(false)
      .barHeight(0)
      .animationDuration(0)
      }.alignItems(VerticalAlign.Bottom).width('100%').height(120).margin({top:0,right:0,bottom:10,left:0})
    }
    .width('100%')
    .height('100%')
  }
}

效果如下

3. 底部按钮功能实现

3.1 底部功能实现主要使用“Row”，“Column”，“Text”,“Image”等相关技术实现，代码如下

Row() {
  Column() {
    Image($r('app.media.index_select'))
      .width(60).height(60)
    Text('首页')
      .size({ width: '100%', height: 60 }).textAlign(TextAlign.Center)
      .fontSize(20)
      .fontColor(Color.Red)
    }
    .layoutWeight(1)
    .backgroundColor(0xFFEFD5)
    .height("100%")

  Column() {
     Image($r('app.media.msg_unselect'))
      .width(60).height(60)
    Text('消息')
      .size({ width: '100%', height: 60 }).textAlign(TextAlign.Center)
      .fontSize(20)
      .fontColor(Color.Black)
    }
    .layoutWeight(1)
    .backgroundColor(0xFFEFD5)
    .height("100%")

  Column() {
    Image($r('app.media.my_unselect'))
      .width(60).height(60)
    Text('我的')
      .size({ width: '100%', height: 60 }).textAlign(TextAlign.Center)
      .fontSize(20)
      .fontColor(Color.Black)
    }
    .layoutWeight(1)
    .backgroundColor(0xFFEFD5)
    .height("100%")
}.alignItems(VerticalAlign.Bottom).width('100%').height(120).margin({top:0,right:0,bottom:10,left:0})

4. 运行效果

4.1 Tabs和按钮联动问题实现

我们在定义一个全局变量SelectPos为当前选择的索引，当点击按钮的时候对当前索引进行赋值，并对Image和字体颜色进行改变，全部代码如下

@Entry
@Component
struct MyNewsIndex {
  private controller: TabsController = new TabsController()
  @State SelectPos:number=0;
  public IndexClick(){
    this.SelectPos=0;
    this.controller.changeIndex(0)
  }
  public messageClick(){
    this.SelectPos=1;
    this.controller.changeIndex(1)
  }
  public myClick(){
    this.SelectPos=2;
    this.controller.changeIndex(2)
  }

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Tabs({ controller: this.controller }) {
        TabContent() {
          Text("首页")
            .width('100%').height('100%')
            .fontSize(50)
            .textAlign(TextAlign.Center)
            .fontColor(Color.White)
            .backgroundColor(Color.Pink)
        }.tabBar('首页')
        TabContent() {
          Text("消息")
            .width('100%').height('100%')
            .fontSize(50)
            .textAlign(TextAlign.Center)
            .fontColor(Color.White)
            .backgroundColor(Color.Blue)
        }.tabBar('消息')
        TabContent() {
          Text("我的")
            .width('100%').height('100%')
            .fontSize(50)
            .textAlign(TextAlign.Center)
            .fontColor(Color.White)
            .backgroundColor(Color.Red)
        }.tabBar('我的')
      }
      .scrollable(false)
      .barHeight(0)
      .animationDuration(0)

      Row() {
        Column(){
          Image((this.SelectPos==0?$r('app.media.index_select'):$r('app.media.index_unselect')))
            .width(60).height(60)
          Text('首页')
            .size({ width: '100%', height: 60 }).textAlign(TextAlign.Center)
            .fontSize(20)
            .fontColor((this.SelectPos==0?Color.Red:Color.Black))
        }
        .layoutWeight(1)
        .backgroundColor(0xFFEFD5)
        .height("100%")
        .onClick(this.IndexClick.bind(this))

        Column(){
          Image((this.SelectPos==1?$r('app.media.msg_select'):$r('app.media.msg_unselect')))
            .width(60).height(60)
          Text('消息')
            .size({ width: '100%', height: 60 }).textAlign(TextAlign.Center)
            .fontSize(20)
            .fontColor((this.SelectPos==1?Color.Red:Color.Black))
        }
        .layoutWeight(1)
        .backgroundColor(0xFFEFD5)
        .height("100%")
        .onClick(this.messageClick.bind(this))

        Column(){
          Image((this.SelectPos==2?$r('app.media.my_select'):$r('app.media.my_unselect')))
            .width(60).height(60)
          Text('我的')
            .size({ width: '100%', height: 60 }).textAlign(TextAlign.Center)
            .fontSize(20)
            .fontColor((this.SelectPos==2?Color.Red:Color.Black))
        }
        .layoutWeight(1)
        .backgroundColor(0xFFEFD5)
        .height("100%")
        .onClick(this.myClick.bind(this))
      }.alignItems(VerticalAlign.Bottom).width('100%').height(120).margin({top:0,right:0,bottom:10,left:0})


    }
    .width('100%')
    .height('100%')
  }
}

运行效果如下

标签：ets,tabcontent,Center,tabs,100%,height,60,width,Color
来源： https://www.cnblogs.com/developer-huawei/p/16112725.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

【HarmonyOS】【ARKUI】鸿蒙 ets 方式 tabs+tabcontent 实现底部导航栏

1. 开发准备

2. Tabs功能实现

3. 底部按钮功能实现

4. 运行效果