鸿蒙实战案例——黑马健康app——DAY02

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

目录

文章目录

前言

一、导航栏Tabs的细节布局处理

二、tab导航栏业务处理实现

总结

---

---

前言

今天主要完成的任务是首页Tabs底部导航栏的设置

---

一、导航栏Tabs的细节布局处理

详情图片如下：导航栏位于图片底部

 具体代码实现如下：

build(){
  Tabs({ barPosition: BreakpointConstants.BAR_POSITION.getValue(this.currentBreakpoint) }){
  TabContent(){
     Recordindex()

  }
    .tabBar(this.TabBarBUilder($r('app.string.tab_record'),$r('app.media.ic_calendar'),0))
    TabContent(){
      Text('发现页面')

    }
    .tabBar(this.TabBarBUilder($r('app.string.tab_discover'),$r('app.media.discover'),1))

    TabContent(){
      Text('我的')

    }
    .tabBar(this.TabBarBUilder($r('app.string.tab_user'),$r('app.media.ic_user_portrait'),2))

  }
    .width('100%')
    .height('100%')
    .onChange(index => this.currentIndex = index)
    .vertical(new BreakpointType({
     sm: false,
     md: true,
     lg: true
  }).getValue(this.currentBreakpoint))
  }

}

首先使用Tabs(){}设置个导航栏，然后 使用 barPosition: BreakpointConstants.BAR_POSITION.getValue(this.currentBreakpoint) 属性将导航栏的位置从顶部改到底部。

然后一个tabcontent下面跟着一个tabbar为一组，tabcontent为页面具体内容，tabbar为导航栏的文字图片等属性。

并且给tab设置了属性.width('100%')
    .height('100%')
    .onChange(index => this.currentIndex = index)
    .vertical(new BreakpointType({
     sm: false,
     md: true,
     lg: true
  }).getValue(this.currentBreakpoint))
  }

设置了onchange将当前角标存储到this.currentIndex里面。还通过 .vertical设置了位置。

并且通过this.TabBarBUilder($r('app.string.tab_discover'),$r('app.media.discover')，1）通过创建的TabBarBUilder方法传入参数设置tabbar属性，其中参数有字符串按钮图标和角标。

二、tab导航栏业务处理实现

@Builder TabBarBUilder(title: ResourceStr,image:ResourceStr,index:number){  //自定义tabbar
    Column({space:8}){
      Image(image)
        .width(22)
        .fillColor(this.selectColor(index))
      Text(title)
        .fontSize(14)
        .fontColor(this.selectColor(index))
    }

  }

 selectColor(index:number){
   return this.currentIndex === index ? $r('app.color.primary_color') : $r('app.color.gray')
 }

 

首先设置了一个 TabBarBUilder方法，通过创建的TabBarBUilder方法传入参数设置tabbar属性，其中参数有字符串按钮图标和角标。

然后设置了selectColor(index:number)方法用来将点击的当前页面的导航栏设置颜色等属性。

---

总结

今天主要完成的任务是首页Tabs底部导航栏的布局设置还有业务处理