黑马健康项目（三）首页Tabs

首页Tabs

一准备阶段：

首先构思这样一个页面

是作为黑马健康APP的首页，最下方是一个导航栏可以快速的切换内容，所以采用tabs的组件实现这个主页部分

二代码实现：

build() {
  Tabs({ barPosition: BreakpointConstants.BAR_POSITION.getValue(this.currentBreakpoint) }) {
    TabContent() {
      RecordIndex({isPageShow: this.isPageShow})
    }
    .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)
  
}

在一个Tabs组件内有三个页面所以有三对tabContent，tabBar

由于我们的导航栏中系统自带的样式比较单一所以我们采用Builder来自己创建一个样式

@Builder TabBarBuilder(title: ResourceStr, image: ResourceStr, index: number) {
  Column({ space: CommonConstants.SPACE_8 }) {
    Image(image)
      .width(22)
      .fillColor(this.selectColor(index))
    Text(title)
      .fontSize(14)
      .fontColor(this.selectColor(index))
  }
}

Builder中包含上半边图片和下半边文本还有角标，其中角标是必不可少的，由于我们是自己创建的组件所以没有默认的选择高亮，他的作用是用于我们在选择导航时提供高亮对应

@State currentIndex: number = 0

@Builder TabBarBuilder(title: ResourceStr, image: ResourceStr, index: number) {
  Column({ space: CommonConstants.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')
}

.onChange(index => this.currentIndex = index)

在onChange时获取index角标是否和点击角标对应相等通过selectColor函数将对应颜色结果传给fillColor来得到不同的高亮效果